<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta property="qc:admins" content="465267610762567726375" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AppML 教程 | 菜鸟教程</title>
<link rel='dns-prefetch' href='//s.w.org'>
<link rel="canonical" href="http://www.runoob.com/appml/appml-tutorial.html" />
<meta name="keywords" content="AppML 教程,AppML">
<meta name="description" content="&amp;lt;AppML&amp;gt; 教程      &amp;lt;AppML&amp;gt; 快速和简单的 Web 开发    什么是 &amp;lt;AppML&amp;gt;? &amp;lt;AppML&amp;gt; appML是一个为web应用程序设计的HTML扩展框:    XML 语言定义了应用的模型  	 JavaScript 运行于客户端浏览器上 	 PHP 或者 ASP 脚本运行于服务器上   AppML ..">
<link rel="shortcut icon" href="http://www.runoob.com/favicon.ico" mce_href="http://www.runoob.com/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="http://www.runoob.com/wp-content/themes/runoob/style.css?v=1.02" type="text/css" media="all" />
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/fontawesome/4.2.0/css/font-awesome.min.css" media="all" />
<script src="http://cdn.static.runoob.com/libs/jquery/1.8.1/jquery.min.js"></script>
<!--[if lt IE 9]>
     <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
  <![endif]-->
<link rel="apple-touch-icon" href="http://static.runoob.com/images/icon/mobile-icon.png"/>
<meta name="apple-mobile-web-app-title" content="菜鸟教程">
</head>
<body>
<div class="container logo-search">
<div class="col search row-search-mobile">
<form action="index.php">
<input class="placeholder" value="搜索……" name="s" autocomplete="off">
</form>
</div>
<div class="row">
<div class="col logo">
<h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
</div>
<div class="col right-list">
<button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
</div>
<div class="col search search-desktop last">
<form action="http://www.runoob.com/" target="_blank">
<input class="placeholder" id="s" name="s" value="搜索……" autocomplete="off">
</form>
</div>
</div>
</div>
<div class="container navigation">
<div class="row">
<div class="col nav">
<ul class="pc-nav">
<li><a href="http://www.runoob.com/">首页</a></li>
<li><a href="/html/html-tutorial.html">HTML</a></li>
<li><a href="/css/css-tutorial.html">CSS</a></li>
<li><a href="/js/js-tutorial.html">JavaScript</a></li>
<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
<li><a href="/sql/sql-tutorial.html">SQL</a></li>
<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
<li><a href="/php/php-tutorial.html">PHP</a></li>
<li><a href="/python/python-tutorial.html">Python</a></li>
<li><a href="/cprogramming/c-tutorial.html">C</a></li>
<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
<li><a href="/java/java-tutorial.html">Java</a></li>
<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
<li><a href="/sitemap">更多……</a></li>
</ul>
<ul class="mobile-nav">
<li><a href="http://www.runoob.com/">首页</a></li>
<li><a href="/html/html-tutorial.html">HTML</a></li>
<li><a href="/css/css-tutorial.html">CSS</a></li>
<li><a href="/js/js-tutorial.html">JavaScript</a></li>
<a href="javascript:void(0)" class="search-reveal">Search</a>
</ul>
</div>
</div>
</div>
<div class="container main">
<div class="row">
<div class="col left-column">
<div class="tab">AppML 教程</div>
<div class="sidebar-box gallery-list">
<div class="design" id="leftcolumn">
<a target="_top" title="AppML 教程" href="/appml/appml-tutorial.html">
AppML 教程 </a>
<a target="_top" title="如何使用 AppML" href="/appml/appml-howto.html">
如何使用 AppML </a>
<a target="_top" title="AppML 下载" href="/appml/appml-download.html">
AppML 下载 </a>
<a target="_top" title="AppML 架构" href="/appml/appml-architecture.html">
AppML 架构 </a>
<a target="_top" title="AppML 参考手册" href="/appml/appml-reference.html">
AppML 参考手册 </a>
<a target="_top" title="AppML 案例简介" href="/appml/appml-case-intro.html">
AppML 案例简介 </a>
<a target="_top" title="AppML 案例原型" href="/appml/appml-case-prototyping.html">
AppML 案例原型 </a>
<a target="_top" title="AppML 案例模型" href="/appml/appml-case-models.html">
AppML 案例模型 </a>
<a target="_top" title="AppML 案例模板" href="/appml/appml-case-templates.html">
AppML 案例模板 </a>
<a target="_top" title="AppML 案例 Employees" href="/appml/appml-case-employees.html">
AppML 案例 Employees </a>
<a target="_top" title="AppML 案例 Customers" href="/appml/appml-case-customers.html">
AppML 案例 Customers </a>
<a target="_top" title="AppML 案例 Products" href="/appml/appml-case-products.html">
AppML 案例 Products </a>
<a target="_top" title="AppML 未来的应用程序" href="/appml/appml-webstandards.html">
AppML 案例未来 </a>
</div>
</div>
</div> <div class="col middle-column">
<div class="article">
<div class="article-heading-ad">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px" data-ad-client="ca-pub-5751451760833794" data-ad-slot="1691338467" data-ad-format="horizontal"></ins>
<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
</div>
<div class="previous-next-links">
<div class="previous-design-link"> </div>
<div class="next-design-link"><a href="http://www.runoob.com/appml/appml-howto.html" rel="next"> 如何使用 AppML</a> →</div>
</div>
<div class="article-body">
<div class="article-intro" id="content">
<h1>
<span class="color_h1">&lt;AppML&gt;</span> 教程 </h1>
<hr>
<table><tr>
<td><img border="0" src="/images/pic_appml.jpg"></td>
<td>
<h1>&lt;AppML&gt;</h1>
<h1>快速和简单的</h1>
<h1>Web 开发</h1>
</td>
</tr></table>
<hr>
<h2>什么是 &lt;AppML&gt;?</h2>
<p>&lt;AppML&gt; appML是一个为web应用程序设计的HTML扩展框: </p>
<ul type="square">
<li> XML 语言定义了应用的模型 </li>
<li> JavaScript 运行于客户端浏览器上</li>
<li> PHP 或者 ASP 脚本运行于服务器上 </li>
</ul>
<p>AppML 是应用模式语言（ <strong>A</strong>pplication <strong>M</strong>odeling
<strong>L</strong>anguage）。</p>
<hr>
<h2>学习非常简单</h2>
<ul type="square">
<li>超级简单的模型</li>
<li>超级简单的属性</li>
<li>超级简单的应用开发</li>
<li>运行于任何平台及任何浏览器</li>
<li>安装简单</li>
</ul>
<hr>
<h2>只有 HTML, JavaScript, 和 XML</h2>
<p> &lt;AppML&gt; 只需要在HTML页面中包含 JavaScript，然后再服务端上存储 XML 数据：</p>
<div class="example">
<h2 class="example"> HTML 页面:</h2>
<div class="example_code notranslate">
&lt;h1&gt;My First Web Application&lt;/h1&gt;<br><br>
&lt;div id="Place01"&gt;<br>&lt;table id="Template01"
class="appmltable"&gt;<br>&lt;tr&gt;<br>  &lt;th&gt;Customer&lt;/th&gt;<br>  &lt;th&gt;City&lt;/th&gt;<br>
 &lt;th&gt;Country&lt;/th&gt;<br>&lt;/tr&gt;<br>&lt;tr id="appml_row"&gt;<br>  &lt;td&gt;#CustomerName#&lt;/td&gt;<br>
 &lt;td&gt;#City#&lt;/td&gt;<br>  &lt;td&gt;#Country#&lt;/td&gt;<br>&lt;/tr&gt;<br>&lt;/table&gt;<br>
&lt;/div&gt;<br><br>
&lt;script src="appml.js"&gt;&lt;/script&gt;<br>
&lt;script&gt;<br>
app=new AppML("appml.htmlx","Models/Customers");<br>
app.run("Place01","Template01");<br>
&lt;/script&gt;</div>
<br><h2 class="example"> XML :</h2>
<div class="example_code notranslate">
&lt;appml&gt;<br><br>
&lt;datasource&gt;<br>
&lt;database&gt;<br>
  &lt;connection&gt;Demo&lt;/connection&gt;<br>
  &lt;sql&gt;SELECT CustomerName,City,Country FROM Customers&lt;/sql&gt;<br>
&lt;/database&gt;<br>
&lt;/datasource&gt;<br><br>
&lt;/appml&gt;
</div>
<br><a class="tryitbtn" href="/try/try.php?filename=tryappml_tut_03" target="_blank">尝试一下 »</a>
</div>
<p>如果你之前已经学习了web开发，你会发现 &lt;AppML&gt; 使用非常简单。 </p>
<p>如果你之前学习过 PHP, ASP, 或者
ASP.NET的开发, 你会清楚的看到使用 &lt;AppML&gt; 的好处。</p>
<hr>
<h2>现代 Web 架构</h2>
<p>&lt;AppML&gt; 是一个结合了最新的技术和现代web开发想法，使用低消耗高速简单的架构：</p>
<ul type="square">
<li>采用 MVC 架构</li>
<li>极低的带宽消耗</li>
<li>云计算的优化</li>
<li>内容完全分离</li>
<li>智能，灵活，快速的Web开发</li>
<li>高度的可扩展性和可测试性</li>
<li>简单的配置和重新配置</li>
<li>智能支持用户账号和角色</li>
</ul>
<hr>
<h2>&lt;Appml&gt; 历史</h2>
<p>1999年，Refsnes Data公司开始研发AppML,一种基于XML、用来定义Internet应用程序的语言。2000年9月，一个为了挪威手球联盟而进行的大型项目开始，其目的是想通过仅仅使用AppML将一个巨大的信息系统从旧的DOS环境转换到现代的Internet上。而这个主要的项目刚刚取得了巨大的成功。据开发者估计，和传统的Web开发相比，这次的开发时间被缩短了高达75%。</p>
<p>在2007年九月中旬，AppML内容实现脱机使用，因为它支持ASP和IE。</p>
<p>在2013年十月，AppML宣布，作为一个开放源代码的产品，在PHP、ASP.NET版本中兼容
所有的浏览器。</p>
<p>AppML在1999年最初的设计目标:</p>
<ul>
<li>AppML 应用必须运行于是有网络</li>
<li>AppML 应用应具有平台独立性</li>
<li>AppML 应用必须使用互联网标准 (HTTP, HTML, CSS, XML)</li>
<li>AppML 应用必须支持各种应用的需求</li>
<li>AppML 应用必需是自描述</li>
<li>AppML
应用程序必须易于开发，维护和修改</li>
<li>AppML 应用程序必须面向未来</li>
</ul>
</div>
</div>
<div class="previous-next-links">
<div class="previous-design-link"> </div>
<div class="next-design-link"><a href="http://www.runoob.com/appml/appml-howto.html" rel="next"> 如何使用 AppML</a> →</div>
</div>
<div class="sidebar-box ad-box ad-box-large">
<div class="ad-336280">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px" data-ad-client="ca-pub-5751451760833794" data-ad-slot="1691338467" data-ad-format="rectangle"></ins>
<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
</div>
</div>
</div>
</div>
<div class="fivecol last right-column">
<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
<div class="sidebar-box">
<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
<div class="qqinfo">
</div>
</div>
<div class="tab tab-light-blue">分类导航</div>
<div class="sidebar-box sidebar-cate">
<div class="sidebar-tree">
<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul> </div>
</div>
<br>
<div class="sidebar-box ad-box ad-box-large">
<div class="sidebar-box advertise-here">
<a href="javascript:void(0);">Advertisement</a>
</div>
<div class="ad-600160">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block;width:160px;height:600px" data-ad-client="ca-pub-5751451760833794" data-ad-slot="4106274865"></ins>
<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
</div>
</div>
</div></div>
</div>
<div id="footer" class="mar-t50">
<div class="w3cschoolcc-block">
<div class="w3cschoolcc cf">
<dl>
<dt>
在线实例
</dt>
<dd>
&middot;<a href="/html/html-examples.html">HTML 实例</a>
</dd>
<dd>
&middot;<a href="/css/css-examples.html">CSS 实例</a>
</dd>
<dd>
&middot;<a href="/js/js-examples.html">JavaScript 实例</a>
</dd>
<dd>
&middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
</dd>
<dd>
&middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
</dd>
<dd>
&middot;<a href="/xml/xml-examples.html">XML 实例</a>
</dd>
<dd>
&middot;<a href="/java/java-examples.html">Java 实例</a>
</dd>
</dl>
<dl>
<dt>
字符集&工具
</dt>
<dd>
&middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
</dd>
<dd>
&middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
</dd>
<dd>
&middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
</dd>
<dd>
&middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
</dd>
<dd>
&middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
</dd>
<dd>
&middot; <a href="/jsontool">JSON 格式化工具</a>
</dd>
</dl>
<dl>
<dt>
最新更新
</dt>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type() ...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim() ...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
</dd>
</dl>
<dl>
<dt>
站点信息
</dt>
<dd>
&middot;
<a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
</dd>
<dd>
&middot;
<a href="/disclaimer">免责声明</a>
</dd>
<dd>
&middot;
<a href="/aboutus">关于我们</a>
</dd>
<dd>
&middot;
<a href="/archives">文章归档</a>
</dd>
</dl>
<div class="search-share">
<div class="app-download">
<div>
<strong>关注微信</strong>
</div>
</div>
<div class="share">
<img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
</div>
</div>
</div>
</div>
<div class="w-1000 copyright">
Copyright &copy; 2013-2016 <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
<strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
</div>
</div>
<div class="fixed-btn">
<a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
<a class="qrcode" href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
<a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
<div id="bottom-qrcode" class="modal panel-modal hide fade in">
<h4>微信关注</h4>
<div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
</div>
</div>
<div style="display:none;">
<script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
<script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">AppML 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AppML 教程"  href="/appml/appml-tutorial.html" >
			AppML 教程			</a>
						<a target="_top" title="如何使用 AppML"  href="/appml/appml-howto.html" >
			如何使用 AppML			</a>
						<a target="_top" title="AppML 下载"  href="/appml/appml-download.html" >
			AppML 下载			</a>
						<a target="_top" title="AppML 架构"  href="/appml/appml-architecture.html" >
			AppML 架构			</a>
						<a target="_top" title="AppML 参考手册"  href="/appml/appml-reference.html" >
			AppML 参考手册			</a>
						<a target="_top" title="AppML 案例简介"  href="/appml/appml-case-intro.html" >
			AppML 案例简介			</a>
						<a target="_top" title="AppML 案例原型"  href="/appml/appml-case-prototyping.html" >
			AppML 案例原型			</a>
						<a target="_top" title="AppML 案例模型"  href="/appml/appml-case-models.html" >
			AppML 案例模型			</a>
						<a target="_top" title="AppML 案例模板"  href="/appml/appml-case-templates.html" >
			AppML 案例模板			</a>
						<a target="_top" title="AppML 案例 Employees"  href="/appml/appml-case-employees.html" >
			AppML 案例 Employees			</a>
						<a target="_top" title="AppML 案例 Customers"  href="/appml/appml-case-customers.html" >
			AppML 案例 Customers			</a>
						<a target="_top" title="AppML 案例 Products"  href="/appml/appml-case-products.html" >
			AppML 案例 Products			</a>
						<a target="_top" title="AppML 未来的应用程序"  href="/appml/appml-webstandards.html" >
			AppML 案例未来			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/appml/appml-tutorial.html" rel="prev"> AppML 教程</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/appml/appml-download.html" rel="next"> AppML 下载</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>如何使用 
<span class="color_h1">&lt;AppML&gt;</span></h1>
<hr>
<p class="intro">本章节将通过以下4个简单的步骤演示如何创建&lt;AppML&gt;的应用程序。</p>
<p class="intro">下一章将介绍如何下载&lt;AppML&gt;，并开始在你自己的电脑上开发Web应用程序。</p>

<hr>
<h2>1.创建模型（Model）</h2>
<p>使用以下内容创建文件</p>
<div class="code notranslate">
<div>
&lt;appml&gt;<br><br>
&lt;datasource&gt;<br>
&lt;database&gt;<br>
 
&lt;connection&gt;Demo&lt;/connection&gt;<br>  &lt;sql&gt;SELECT CustomerName,ContactName,City,Country FROM Customers&lt;/sql&gt;<br>
	  &lt;orderby&gt;CustomerName&lt;/orderby&gt;<br>&lt;/database&gt;<br>
&lt;/datasource&gt;<br><br>
	&lt;filters&gt;<br>  
	&lt;query&gt;<br>  &lt;field&gt;CustomerName&lt;/field&gt;<br>  
	&lt;/query&gt;<br>&lt;/filters&gt;<br><br>
&lt;/appml&gt; 
</div>
</div>
<p>在子目录中Models（我们建议）将该文件保存为 Customers.xml。</p>

<hr>
<h2>模型解析</h2>
<p> &lt;appml&gt; 标签定义了模型。</p>
<p> &lt;datasource&gt;标签定义模型的数据源。</p>
<p>&lt;database&gt;标签定义数据库。</p>
<p>&lt;connection&gt;标签定义数据库的链接。 </p>
<p>&lt;sql&gt;标签定义数据查询</p>
<p>&lt;orderby&gt;标签定义默认排序。</p>
<p>&lt;query&gt;标签定义合法的查询过滤器。 </p>

<hr>
<h2>2. 创建 WEB 页面</h2>
<p>在第一个 &lt;AppML&gt; app中,创建一个 HTML页面:</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code notranslate">
&lt;!DOCTYPE html&gt;<br>
&lt;html&gt;<br>&lt;body&gt;<br><br>
&lt;h1&gt;My First Web Application&lt;/h1&gt;<br><br>&lt;table&gt;<br>&lt;tr&gt;<br>  &lt;th&gt;Customer&lt;/th&gt;<br>  &lt;th&gt;City&lt;/th&gt;<br>  &lt;th&gt;Country&lt;/th&gt;<br>&lt;/tr&gt;<br>&lt;tr&gt;<br>  
	&lt;td&gt;Alfreds Futterkiste&lt;/td&gt;<br>  &lt;td&gt;Berlin&lt;/td&gt;<br>  
	&lt;td&gt;Germany&lt;/td&gt;<br>&lt;/tr&gt;<br>&lt;/table&gt; <br><br>
&lt;/body&gt;<br>
&lt;/html&gt;
</div>
<br><a class="tryitbtn" href="/try/try.php?filename=tryappml_tut_01" target="_blank">尝试一下 »</a>
</div>
<br><hr>
<h2>3. 添加样式</h2>
<p>
在你的web页面中添加层叠样式在执行e &lt;AppML&gt; app:</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code notranslate">
&lt;!DOCTYPE html&gt;<br>
&lt;html&gt;<br><strong><br>&lt;head&gt;<br>
&lt;link rel="stylesheet" href="appml.css"&gt;<br>
&lt;/head&gt;
<br></strong>
<br>
&lt;body&gt;<br>&lt;h1&gt;My First Web Application&lt;/h1&gt;<br><br>&lt;table <strong>class="appmltable"</strong>&gt;<br>&lt;tr&gt;<br>  &lt;th&gt;Customer&lt;/th&gt;<br>
 
&lt;th&gt;City&lt;/th&gt;<br>  &lt;th&gt;Country&lt;/th&gt;<br>&lt;/tr&gt;<br>&lt;tr&gt;<br>
	  &lt;td&gt;Alfreds Futterkiste&lt;/td&gt;<br>  &lt;td&gt;Berlin&lt;/td&gt;<br>  
	&lt;td&gt;Germany&lt;/td&gt;<br>&lt;/tr&gt;<br>
&lt;/table&gt;<br><br>
&lt;/body&gt;<br>
&lt;/html&gt;
</div>
<br><a class="tryitbtn" href="/try/try.php?filename=tryappml_tut_02" target="_blank">尝试一下 »</a>
</div>
<br><hr>
<h2>4. 添加脚本, 然后执行应用</h2>
<p>
在你的web页面中添加脚本来运行 &lt;AppML&gt; app:</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code notranslate">
&lt;!DOCTYPE html&gt;<br>
&lt;html&gt;<br><strong><br></strong>
	&lt;head&gt;<br>
&lt;link rel="stylesheet" href="appml.css"&gt;<br>
&lt;/head&gt;
<br><br>
&lt;body&gt;<br>&lt;h1&gt;My First Web Application&lt;/h1&gt;<br><br><strong>&lt;div id="Place01"&gt;<br><br></strong>&lt;table <strong>id="Template01"</strong> class="appmltable"&gt;<br>&lt;tr&gt;<br>  &lt;th&gt;Customer&lt;/th&gt;<br>
 
&lt;th&gt;City&lt;/th&gt;<br>  &lt;th&gt;Country&lt;/th&gt;<br>&lt;/tr&gt;<br>&lt;tr 
	<strong>id="appml_row"</strong>&gt;<br>
 
&lt;td&gt;<strong>#CustomerName#</strong>&lt;/td&gt;<br>  &lt;td&gt;<strong>#City#</strong>&lt;/td&gt;<br>  &lt;td&gt;<strong>#Country#</strong>&lt;/td&gt;<br>&lt;/tr&gt;<br>
&lt;/table&gt; <br><strong>&lt;/div&gt;<br></strong><br><strong>&lt;script src="appml.js"&gt;&lt;/script&gt;<br>
	&lt;script&gt;<br>
app=new
	AppML("appml.htmlx","Models/Customers.xml");<br>
app.run("Place01","Template01");<br>
&lt;/script&gt;</strong><br><br>&lt;/body&gt;<br>
&lt;/html&gt;</div>
<br><a class="tryitbtn" href="/try/try.php?filename=tryappml_tut_03" target="_blank">尝试一下 »</a>
</div>
<br><hr>
<h2>实例解析</h2>

<p> &lt;AppML&gt; 库中含有大量的函数。这些函数可以再你的web页面中调用。</p>
<p><strong>&lt;script src="appml.js"&gt;</strong> 加载了 &lt;AppML&gt; 库。</p>
  
<p>
 JavaScript 语句: <strong>app=new AppML("appml.htmlx","Models/Customers.xml");</strong> 创建 AppML 应用对象, 
 然后执行web服务端脚本 "appml.htmlx" 来加载 "Customers.xml"文件的数据。 </p>
  
<p>
 JavaScript 语句 <strong>app.run("Place01","Template01");</strong> 将数据插入到 id="Place01" 的HTML元素中, 
使用 id="Template01" 属性元素作为模板。</p>

<p>
属性 <strong>id="appml_row"</strong> 定义了每条数据插入到HTML元素中。</p>
  
<p># 标记中的数据会使用模型的数据替换。</p>

<p>以上所有，你可以想象到更快的原型吗？</p>
<hr>
<h2>它是如何工作的？</h2>
<ul class="auto-style1">
<li>当web页面加载时, 你可以再页面中加载 &lt;AppML&gt; 控制器。</li>
	<li>使用 &lt;AppML&gt; 控制器, 你可以再页面创建 &lt;AppML&gt; 对象。</li>
	<li>当你在页面中运行 &lt;AppML&gt; 对象, 它会请求服务端数据控制器。</li>
	<li> &lt;AppML&gt; 对象从服务器接收数据 (使用数据模型)。</li>
	<li> &lt;AppML&gt; 对象 (或者你的代码) 在页面中显示数据。</li>
	<li>(可选) web用户可以改变数据。</li>
	<li>(可选) &lt;AppML&gt; 可以在服务器后台发送数据。</li>
	<li>(可选) 服务器控制器可以在服务端存储数据。</li>
</ul>
<hr>
<h2>典型的 Web 文件和文件夹：</h2>
<table><tr>
<td>
<p><img border="0" src="/images/pic_web.png" alt="Folders"></p>
</td>
<td width="30px"></td>
<td valign="top">
<p><br>web文件夹: <strong>Demo</strong></p>
<p>数据文件夹: <strong>Data</strong></p>
<p>图片文件夹: <strong>Images</strong></p>
<p>模型文件夹:<strong> Models</strong></p>
<p>应用: <strong>Demo.htm</strong></p>
<p>样式: <strong>Demo.css</strong></p>
<p> </p>
<p>&lt;AppML&gt; 配置文件: <strong>appml_config.php </strong>(或者 .htmlx)</p>
<p>&lt;AppML&gt; 样式文件: <strong>appml.css</strong></p>
<p>&lt;AppML&gt; 浏览器控制器: <strong>appml.js</strong></p>
<p>&lt;AppML&gt; 服务器控制器: <strong>appml.php</strong> (or .htmlx)</p>
</td>
</tr></table>
<hr>
<h2>没有限制</h2>
<p>可以将 &lt;AppML&gt; 对象放在 HTML 页面。 &lt;AppML&gt; 不影响页面的其他部分。</p>
<p>&lt;AppML&gt; 在方案页面不存在时默认为标准的显示页面。
这是完美的快速原型。</p>
<p>但是 &lt;AppML&gt; 主要功能不是用于页面的显示。 &lt;AppML&gt; 主要是读取
应用程序数据. 它带来的数据可以通过自由的使用 HTML, CSS, 和 JavaScript 来设计它们的显示效果。你可以： </p>
<ul type="square">
<li>自己编写HTML，让AppML处理数据。</li>
	<li>调用模型，并处理所有的显示。</li>
	<li>使用AppML的属性和方法,创建其它的组合。  </li>
</ul>
<p>你很快会发现 &lt;AppML&gt;具备了强大的功能，它可以为你的web应用提供数据和数据模型。你可以：</p>
<ul type="square">
<li>为用户或用户组定义数据安全</li>
	<li>连接所有类型数据库, 如 Access, MySQL, SQL, 和 Oracle</li>
	<li>连接 XML 文件和 Text 文件 </li>
	<li>定义数据类型，数据格式，数据限制。</li>
	<li>给模型添加任何新元素。</li>
</ul>
<p><a href="appml-reference.html">阅读&lt;AppML&gt; 参考手册</a> </p>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/appml/appml-tutorial.html" rel="prev"> AppML 教程</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/appml/appml-download.html" rel="next"> AppML 下载</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<form action="index.php">
<input class="placeholder" value="搜索……" name="s" autocomplete="off">
</form>
</div>
<div class="row">
<div class="col logo">
<h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
</div>
<div class="col right-list">
<button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
</div>
<div class="col search search-desktop last">
<form action="http://www.runoob.com/" target="_blank">
<input class="placeholder" id="s" name="s" value="搜索……" autocomplete="off">
</form>
</div>
</div>
</div>
<div class="container navigation">
<div class="row">
<div class="col nav">
<ul class="pc-nav">
<li><a href="http://www.runoob.com/">首页</a></li>
<li><a href="/html/html-tutorial.html">HTML</a></li>
<li><a href="/css/css-tutorial.html">CSS</a></li>
<li><a href="/js/js-tutorial.html">JavaScript</a></li>
<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
<li><a href="/sql/sql-tutorial.html">SQL</a></li>
<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
<li><a href="/php/php-tutorial.html">PHP</a></li>
<li><a href="/python/python-tutorial.html">Python</a></li>
<li><a href="/cprogramming/c-tutorial.html">C</a></li>
<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
<li><a href="/java/java-tutorial.html">Java</a></li>
<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
<li><a href="/sitemap">更多……</a></li>
</ul>
<ul class="mobile-nav">
<li><a href="http://www.runoob.com/">首页</a></li>
<li><a href="/html/html-tutorial.html">HTML</a></li>
<li><a href="/css/css-tutorial.html">CSS</a></li>
<li><a href="/js/js-tutorial.html">JavaScript</a></li>
<a href="javascript:void(0)" class="search-reveal">Search</a>
</ul>
</div>
</div>
</div>
<div class="container main">
<div class="row">
<div class="col left-column">
<div class="tab">AppML 教程</div>
<div class="sidebar-box gallery-list">
<div class="design" id="leftcolumn">
<a target="_top" title="AppML 教程" href="/appml/appml-tutorial.html">
AppML 教程 </a>
<a target="_top" title="如何使用 AppML" href="/appml/appml-howto.html">
如何使用 AppML </a>
<a target="_top" title="AppML 下载" href="/appml/appml-download.html">
AppML 下载 </a>
<a target="_top" title="AppML 架构" href="/appml/appml-architecture.html">
AppML 架构 </a>
<a target="_top" title="AppML 参考手册" href="/appml/appml-reference.html">
AppML 参考手册 </a>
<a target="_top" title="AppML 案例简介" href="/appml/appml-case-intro.html">
AppML 案例简介 </a>
<a target="_top" title="AppML 案例原型" href="/appml/appml-case-prototyping.html">
AppML 案例原型 </a>
<a target="_top" title="AppML 案例模型" href="/appml/appml-case-models.html">
AppML 案例模型 </a>
<a target="_top" title="AppML 案例模板" href="/appml/appml-case-templates.html">
AppML 案例模板 </a>
<a target="_top" title="AppML 案例 Employees" href="/appml/appml-case-employees.html">
AppML 案例 Employees </a>
<a target="_top" title="AppML 案例 Customers" href="/appml/appml-case-customers.html">
AppML 案例 Customers </a>
<a target="_top" title="AppML 案例 Products" href="/appml/appml-case-products.html">
AppML 案例 Products </a>
<a target="_top" title="AppML 未来的应用程序" href="/appml/appml-webstandards.html">
AppML 案例未来 </a>
</div>
</div>
</div> <div class="col middle-column">
<div class="article">
<div class="article-heading-ad">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px" data-ad-client="ca-pub-5751451760833794" data-ad-slot="1691338467" data-ad-format="horizontal"></ins>
<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
</div>
<div class="previous-next-links">
<div class="previous-design-link">← <a href="http://www.runoob.com/appml/appml-howto.html" rel="prev"> 如何使用 AppML</a> </div>
<div class="next-design-link"><a href="http://www.runoob.com/appml/appml-architecture.html" rel="next"> AppML 架构</a> →</div>
</div>
<div class="article-body">
<div class="article-intro" id="content">
<h1>
<span class="color_h1">&lt;AppML&gt;</span> 下载</h1>
<hr>
<p class="intro">本章节将介绍如何下载 &lt;AppML&gt;，下载后我们将立即开始在你的电脑上开发 web应用。</p>
<hr>
<h2>下载 &lt;AppML&gt;</h2>
<p>&lt;AppML&gt; 不是一个产品。 &lt;AppML&gt; 是一个想法。 它仅仅是在浏览器上的脚本和服务器上的脚本。</p>
<p>任何人都可以下载 &lt;AppML&gt; ，下载后可以修改基本来创建我们自己的专业web应用。 </p>
<p>你可以从下载使用于PHP的 &lt;AppML&gt; ： <a href="/try/download/AppmlPHP.zip">AppmlPHP.zip</a></p>
<table class="lamp"><tbody><tr>
<th width="34"><img src="/images/lamp.jpg" width="32" height="32" alt="lamp"></th>
<td>本站关于appml的php实例采用链接数据库的方式为mysqli及mysqlnd<br>
更多关于 php mysqli信息请查看：<a href="http://www.w3cschool.cc/php/php-ref-mysqli.html" target="_blank">PHP 5 MySQLi 函数</a><br>
更多关于 php mysqlnd信息请查看：<a href="http://baike.baidu.com/view/2630684.htm" target="_blank">mysqlnd介绍</a></strong></td>
</tr></tbody></table>
<p>你也可以下载适用于ASP .NET的 &lt;AppML&gt; ： <a href="/try/download/AppmlASP.zip">AppmlASP.zip</a></p>
<hr>
<h2>ZIP 文件内容:</h2>
<table class="reference">
<tr>
<th>文件名</th>
<th>描述</th>
</tr>
<tr>
<td>appml.php (或者.htmlx)</td>
<td>&lt;AppML&gt; 服务端脚本</td>
</tr>
<tr>
<td>appml.css</td>
<td>&lt;AppML&gt;样式文件</td>
</tr>
<tr>
<td>appml.js</td>
<td>&lt;AppML&gt; 浏览器脚本</td>
</tr>
<tr>
<td>appml_config.php (or .htmlx)</td>
<td>&lt;AppML&gt; 本地配置</td>
</tr>
<tr>
<td>Images (文件夹)</td>
<td>&lt;AppLM&gt; 图片样式</td>
</tr>
</table>
<br><hr>
<h2>如果你有自己的web服务器</h2>
<p>如果你已经拥有支持 ASP.NET 或 PHP 的web服务器:</p>
<p>1. 创建一个文件夹并命名为Demo (或者其他)。</p>
<p>2. 从zip中解压文件和文件夹.</p>
<p>3. 拷贝文件很文件夹到你新的web文件夹中。</p>
<p>4. 开始开发你的应用<br></p>
<hr>
<h2>如果你没有web服务器</h2>
<p>如果你没有web服务器，你可以使用 Microsoft's WebMatrix (免费软件) 来开发web应用 </p>
<p>使用 WebMatrix, 你不需要web服务器就可以在你的电脑上编辑，测试，及执行web应用。</p>
<p>WebMatrix 自带功能:</p>
<ul type="square">
<li>&lt;AppML&gt; 文件编辑器(HTML, CSS, 和 XML)</li>
<li>可以运行应用的web服务器 (IIS Express)</li>
<li>数据库服务器 (SQL Server Compact)</li>
<li>很好的支持服务端语言 (PHP, ASP, 和 ASP.NET)</li>
</ul>
<p>
你可以从以下地址下载WebMatrix：</p>
<p>
<a target="_blank" href="http://www.microsoft.com/web/webmatrix">http://www.microsoft.com/web/webmatrix</a>
</p>
<p>
当你已经安装 WebMatrix, 就可以参照以上步骤使用Appml。</p>
<hr>
<h2>如果已经有数据库</h2>
<p>通过改变
<strong>appml.config</strong>文件的配置信息，可以连接到你自己服务器上的数据库：</p>
<div class="example">
<h2 class="example">PHP MySQL:</h2>
<div class="example_code notranslate">
&lt;database name="demo"&gt;<br>
  &lt;host&gt;127.0.0.1&lt;/host&gt;<br>  &lt;name&gt;dbName&lt;/name&gt;<br> 
&lt;user&gt;dbUser&lt;/user&gt;<br>  &lt;password&gt;dbPass&lt;/password&gt;<br>&lt;/database&gt;</div>
</div>
<br><div class="example">
<h2 class="example">ASP.NET SQL Server</h2>
<div class="example_code notranslate">
&lt;database name="demo"&gt;<br>
&lt;connection&gt;<br>Provider=SQLOLEDB;data source=sName;Database=dbName;user
id=dbUser;password=dbPass<br>&lt;/connection&gt;<br>&lt;/database&gt;<br>
</div>
</div>
<br><div class="example">
<h2 class="example">ASP.NET Access (完整路径)</h2>
<div class="example_code notranslate">
&lt;database name="demo"&gt;<br>
&lt;connection&gt;<br>Provider=Microsoft.Jet.OLEDB.4.0;Data Source=C:DemoDataDemo.mdb<br>&lt;/connection&gt;<br>&lt;/database&gt;<br>
</div>
</div>
<br><div class="example">
<h2 class="example">ASP.NET Access (虚拟路径;)</h2>
<div class="example_code notranslate">
&lt;database name="demo"&gt;<br>
&lt;connection&gt;<br>Provider=Microsoft.Jet.OLEDB.4.0;Data Source=#webroot#DataDemo.mdb<br>&lt;/connection&gt;<br>&lt;/database&gt;<br>
</div>
</div>
<br><hr>
<h2>如果你没有数据库</h2>
<p>如果你没有数据库:</p>
<p>你可以使用 WebMatrix 创建一个数据库。</p>
<p>或者从以下链接下载 Access 数据库: <a href="/try/download/Northwind.zip">
Northwind.zip</a>.</p>
或者从以下链接下载 空的 Access 数据库: <a href="/try/download/EmptyDatabase.zip">
Database.zip</a></p>
<hr>
<h2>更多下载 </h2>
<p>你可以从本周下载更多应用实例教程： </p>
<p><a href="/try/download/DemoPHP.zip">PHP 版本</a></p>
<p><a href="/try/download/DemoASP.zip">ASP.NET 版本</a></p>
<p>你可以下载完整的数据应用测试实例： </p>
<p><a href="/try/download/CreatePHP.zip">PHP 版本</a></p>
<p><a href="/try/download/CreateASP.zip">ASP.NET 版本</a></p>
</div>
</div>
<div class="previous-next-links">
<div class="previous-design-link">← <a href="http://www.runoob.com/appml/appml-howto.html" rel="prev"> 如何使用 AppML</a> </div>
<div class="next-design-link"><a href="http://www.runoob.com/appml/appml-architecture.html" rel="next"> AppML 架构</a> →</div>
</div>
<div class="sidebar-box ad-box ad-box-large">
<div class="ad-336280">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px" data-ad-client="ca-pub-5751451760833794" data-ad-slot="1691338467" data-ad-format="rectangle"></ins>
<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
</div>
</div>
</div>
</div>
<div class="fivecol last right-column">
<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
<div class="sidebar-box">
<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
<div class="qqinfo">
</div>
</div>
<div class="tab tab-light-blue">分类导航</div>
<div class="sidebar-box sidebar-cate">
<div class="sidebar-tree">
<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul> </div>
</div>
<br>
<div class="sidebar-box ad-box ad-box-large">
<div class="sidebar-box advertise-here">
<a href="javascript:void(0);">Advertisement</a>
</div>
<div class="ad-600160">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block;width:160px;height:600px" data-ad-client="ca-pub-5751451760833794" data-ad-slot="4106274865"></ins>
<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
</div>
</div>
</div></div>
</div>
<div id="footer" class="mar-t50">
<div class="w3cschoolcc-block">
<div class="w3cschoolcc cf">
<dl>
<dt>
在线实例
</dt>
<dd>
&middot;<a href="/html/html-examples.html">HTML 实例</a>
</dd>
<dd>
&middot;<a href="/css/css-examples.html">CSS 实例</a>
</dd>
<dd>
&middot;<a href="/js/js-examples.html">JavaScript 实例</a>
</dd>
<dd>
&middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
</dd>
<dd>
&middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
</dd>
<dd>
&middot;<a href="/xml/xml-examples.html">XML 实例</a>
</dd>
<dd>
&middot;<a href="/java/java-examples.html">Java 实例</a>
</dd>
</dl>
<dl>
<dt>
字符集&工具
</dt>
<dd>
&middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
</dd>
<dd>
&middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
</dd>
<dd>
&middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
</dd>
<dd>
&middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
</dd>
<dd>
&middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
</dd>
<dd>
&middot; <a href="/jsontool">JSON 格式化工具</a>
</dd>
</dl>
<dl>
<dt>
最新更新
</dt>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/event-contextmenu.html" title="jQuery contextmenu()  方法">jQuery contextm...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type() ...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim() ...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
</dd>
</dl>
<dl>
<dt>
站点信息
</dt>
<dd>
&middot;
<a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
</dd>
<dd>
&middot;
<a href="/disclaimer">免责声明</a>
</dd>
<dd>
&middot;
<a href="/aboutus">关于我们</a>
</dd>
<dd>
&middot;
<a href="/archives">文章归档</a>
</dd>
</dl>
<div class="search-share">
<div class="app-download">
<div>
<strong>关注微信</strong>
</div>
</div>
<div class="share">
<img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
</div>
</div>
</div>
</div>
<div class="w-1000 copyright">
Copyright &copy; 2013-2016 <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
<strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
</div>
</div>
<div class="fixed-btn">
<a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
<a class="qrcode" href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
<a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
<div id="bottom-qrcode" class="modal panel-modal hide fade in">
<h4>微信关注</h4>
<div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
</div>
</div>
<div style="display:none;">
<script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
<script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<form action="index.php">
<input class="placeholder" value="搜索……" name="s" autocomplete="off">
</form>
</div>
<div class="row">
<div class="col logo">
<h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
</div>
<div class="col right-list">
<button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
</div>
<div class="col search search-desktop last">
<form action="http://www.runoob.com/" target="_blank">
<input class="placeholder" id="s" name="s" value="搜索……" autocomplete="off">
</form>
</div>
</div>
</div>
<div class="container navigation">
<div class="row">
<div class="col nav">
<ul class="pc-nav">
<li><a href="http://www.runoob.com/">首页</a></li>
<li><a href="/html/html-tutorial.html">HTML</a></li>
<li><a href="/css/css-tutorial.html">CSS</a></li>
<li><a href="/js/js-tutorial.html">JavaScript</a></li>
<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
<li><a href="/sql/sql-tutorial.html">SQL</a></li>
<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
<li><a href="/php/php-tutorial.html">PHP</a></li>
<li><a href="/python/python-tutorial.html">Python</a></li>
<li><a href="/cprogramming/c-tutorial.html">C</a></li>
<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
<li><a href="/java/java-tutorial.html">Java</a></li>
<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
<li><a href="/sitemap">更多……</a></li>
</ul>
<ul class="mobile-nav">
<li><a href="http://www.runoob.com/">首页</a></li>
<li><a href="/html/html-tutorial.html">HTML</a></li>
<li><a href="/css/css-tutorial.html">CSS</a></li>
<li><a href="/js/js-tutorial.html">JavaScript</a></li>
<a href="javascript:void(0)" class="search-reveal">Search</a>
</ul>
</div>
</div>
</div>
<div class="container main">
<div class="row">
<div class="col left-column">
<div class="tab">AppML 教程</div>
<div class="sidebar-box gallery-list">
<div class="design" id="leftcolumn">
<a target="_top" title="AppML 教程" href="/appml/appml-tutorial.html">
AppML 教程 </a>
<a target="_top" title="如何使用 AppML" href="/appml/appml-howto.html">
如何使用 AppML </a>
<a target="_top" title="AppML 下载" href="/appml/appml-download.html">
AppML 下载 </a>
<a target="_top" title="AppML 架构" href="/appml/appml-architecture.html">
AppML 架构 </a>
<a target="_top" title="AppML 参考手册" href="/appml/appml-reference.html">
AppML 参考手册 </a>
<a target="_top" title="AppML 案例简介" href="/appml/appml-case-intro.html">
AppML 案例简介 </a>
<a target="_top" title="AppML 案例原型" href="/appml/appml-case-prototyping.html">
AppML 案例原型 </a>
<a target="_top" title="AppML 案例模型" href="/appml/appml-case-models.html">
AppML 案例模型 </a>
<a target="_top" title="AppML 案例模板" href="/appml/appml-case-templates.html">
AppML 案例模板 </a>
<a target="_top" title="AppML 案例 Employees" href="/appml/appml-case-employees.html">
AppML 案例 Employees </a>
<a target="_top" title="AppML 案例 Customers" href="/appml/appml-case-customers.html">
AppML 案例 Customers </a>
<a target="_top" title="AppML 案例 Products" href="/appml/appml-case-products.html">
AppML 案例 Products </a>
<a target="_top" title="AppML 未来的应用程序" href="/appml/appml-webstandards.html">
AppML 案例未来 </a>
</div>
</div>
</div> <div class="col middle-column">
<div class="article">
<div class="article-heading-ad">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px" data-ad-client="ca-pub-5751451760833794" data-ad-slot="1691338467" data-ad-format="horizontal"></ins>
<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
</div>
<div class="previous-next-links">
<div class="previous-design-link">← <a href="http://www.runoob.com/appml/appml-download.html" rel="prev"> AppML 下载</a> </div>
<div class="next-design-link"><a href="http://www.runoob.com/appml/appml-reference.html" rel="next"> AppML 参考手册</a> →</div>
</div>
<div class="article-body">
<div class="article-intro" id="content">
<h1>
<span class="color_h1">&lt;AppML&gt;</span> 架构</h1>
<hr>
<table><tr>
<td valign="top">
<h2>MVC 架构</h2>
<p> </p>
<p><strong>&lt;AppML&gt; 采用了 MVC 架构。</strong></p>
<p>MVC 全名是 Model View Controller，是模型（Model）－视图（View）－控制器（Controller）的缩写，一种软件设计典范。</p>
<p> <strong>模型(Model)</strong> 描述你的应用。</p>
<p> <strong>视图(View)</strong> 显示你的数据。</p>
<p> <strong>制器(Controller)</strong> 控制你的应用。</p>
<p> </p>
<p><strong>Wikipedia:</strong>
<a target="_blank" href="http://en.wikipedia.org/wiki/Model%20view%20controller">
Model, View, Controller</a></p>
<p> </p>
</td>
<td>       </td>
<td><img alt="MVC" height="314" src="/images/pic_mvc.jpg" width="327"></td>
</tr></table>
<hr>
<h2>模型(MODEL) - 仅仅是一个简单的XML文件</h2>
<p>模型描述了您的应用程序，并且可在不同的硬件和软件平台（PC、iPhone、Tablets 等）重复使用。它不关心用户界面（UI）或表现形式。</p>
<p>模型采用xml编写，存储于web服务器中。</p>
<div class="code notranslate">
<div>
&lt;appml&gt;<br><br>
&lt;datasource&gt;<br>
 
&lt;database&gt;<br>
    &lt;connection&gt;Northwind&lt;/connection&gt;<br>    &lt;sql&gt;SELECT
CustomerName,ContactName,City,Country
FROM Customers&lt;/sql&gt;<br>
 
&lt;/database&gt;<br>
&lt;/datasource&gt;<br><br>
&lt;filters&gt;<br>
&lt;query&gt;<br>  &lt;field label="Customer"&gt;CustomerName&lt;/field&gt;<br> 
&lt;field&gt;City&lt;/field&gt;<br>  &lt;field&gt;Country&lt;/field&gt;<br>&lt;/query&gt;<br>&lt;order&gt;<br> 
&lt;field label="Customer"&gt;CustomerName&lt;/field&gt;<br>  &lt;field&gt;City&lt;/field&gt;<br> 
&lt;field&gt;Country&lt;/field&gt;<br>&lt;/order&gt;<br>&lt;/filters&gt;<br><br>
&lt;/appml&gt;
</div>
</div>
<p>以上实例定义了数据源来自 Northwind 数据库。 </p>
<p>该模型允许使用预定义的 SQL 获取数据。它还允许通过 Customer、City 和 Country 查询数据和排序。</p>
<hr>
<h2>视图（VIEW） - 仅仅是一个普通的 HTML 文件</h2>
<p>视图即是 UI（User Interface：用户界面）。它通常是一个显示和输入数据（可选）HTML 页面：</p>
<div class="code notranslate">
<div>
&lt;!DOCTYPE html&gt;<br>
&lt;html&gt;<br>
&lt;head&gt;<br>
&lt;link rel="stylesheet" href="appml.css" /&gt;<br>
&lt;/head&gt;<br>
&lt;body&gt;<p>&lt;h1&gt;My First Web Application&lt;/h1&gt;<br>
&lt;div id="Place01"&gt;&lt;/div&gt;</p>
<p>&lt;script src="appml.js"&gt;&lt;/script&gt;<br>
&lt;script&gt;<br>
customers=new
AppML("appml.html","Customers.xml");<br>
customers.run("Place01");<br>
&lt;/script&gt;</p>
<p>&lt;/body&gt;<br>
&lt;/html&gt;
</p>
</div>
</div>
<p>以上 HTML 页面使用通过执行脚本语言创建一个 AppML 对象，并将数据显示在 id="Place01" 的 div 中。</p>
<p>采用了 "appml.js" 脚本文件。</p>
<hr>
<h2>CONTROLLER(控制器) - 仅仅是一个浏览器很服务端的脚本</h2>
<p> 服务端脚本通过以下方式控制应用：</p>
<ul type="square">
<li>从浏览器中接收请求数据</li>
<li>将模型和数据返回给浏览器</li>
<li>从浏览器中接收更新数据</li>
<li>在服务器上更新数据</li>
<li>数据通信过程，请进行数据安全验证。</li>
</ul>
<p>浏览器脚本通过以下方式控制应用：</p>
<ul class="auto-style1">
<li>当页面加载时，你可以加载&lt;AppML&gt; 控制器到页面上。</li>
<li>使用控制器，你可以在页面创建 &lt;AppML&gt; 对象。</li>
<li>当执行 &lt;AppML&gt; 对象时, 它会向服务器请求数据。</li>
<li> &lt;AppML&gt; 对象从服务器接受数据（使用数据模型）。</li>
<li> &lt;AppML&gt; 对象（或者你的代码）在页面中显示你的数据。</li>
<li>（可选）web用户修改数据。</li>
<li>（可选）&lt;AppML&gt; 可以向服务器发送修改请求。</li>
</ul>
<hr>
<h2>典型的 Web 文件和文件夹：</h2>
<table><tr>
<td>
<p><img border="0" src="/images/pic_web.png" alt="Folders"></p>
</td>
<td width="30px"></td>
<td valign="top">
<p><br>web文件夹：<strong>Demo</strong></p>
<p>数据文件夹：<strong>Data</strong></p>
<p>图片文件夹：<strong>Images</strong></p>
<p>模型文件夹：<strong> Models</strong></p>
<p>应用：<strong>Demo.htm</strong></p>
<p>样式：<strong>Demo.css</strong></p>
<p> </p>
<p>&lt;AppML&gt; 配置文件：<strong>appml_config.php </strong>(或者 .htmlx)</p>
<p>&lt;AppML&gt; 样式文件：<strong>appml.css</strong></p>
<p>&lt;AppML&gt; 浏览器控制器：<strong>appml.js</strong></p>
<p>&lt;AppML&gt; 服务器控制器：<strong>appml.php</strong> (或者 .htmlx)</p>
</td>
</tr></table>
<hr>
<h2>快速、灵活的应用开发</h2>
<p>快速应用开发（Rapid Application Development、RAD）不仅是一种需求抽取方法，它还是是软件开发为一体的方法。快速应用开发目的是快速发布系统方案，而技术上的优美相对发布的速度来说是次要的。</p>
<p>
&lt;AppML&gt; 提供超快速的原型设计，比传统的软件开发方法高100倍的速度。</p>
<p>应用程序原型可以直接从应用程序模型运行，无需任何编码。</p>
<p>
<a target="_blank" href="http://en.wikipedia.org/wiki/Rapid_application_development">
Wikipedia: Rapid Application Development</a></p>
<p>敏捷软件开发是基于用户和开发者相互协作的基础上一步一步的基发展而来的方法。</p>
<p> &lt;AppML&gt; 应用从原型到完整的应用可以通过递增的方式一步步来编写实现。</p>
<p>
<a target="_blank" href="http://en.wikipedia.org/wiki/Agile_software_development">Wikipedia: Agile Software Development</a></p>
<hr>
<h2>声明式编程</h2>
<p>软件开发往往无法按照预期的时间和预算完成。软件编码错误也是经常出现。
这是因为计算机代码是很难开发、测试、维护。</p>
<p>编码已经<strong>过时了</strong>。你应该更多描述做什么，而不是如何实现它。</p>
<p>使用 &lt;AppML&gt; 你需要在模型中<strong>声明</strong>你的应用 。</p>
<p>使用 <span class="strong">&lt;AppML&gt;</span> 可以<strong>少写或者不用编写代码</strong>。</p>
<p><strong>Wikipedia:</strong>
<a target="_blank" href="http://en.wikipedia.org/wiki/Declarative_language">Declarative
Programming</a></p>
<hr>
<h2>代码先行（Code First）</h2>
<p>Web应用程序开发可以使用以下两种不同的方式：</p>
<p>1. 代码先行（Code First）：使用预编程，预先测试的代码，只增加新的应用程序说明。</p>
<p>2. 契约优先（Contract First）：从头开始使用完整的应用程序的说明要求编写应用程序。</p>
<p><span class="strong">&lt;AppML&gt;</span> 采用最合理的概念：
<strong>代码先行（Code First）</strong>。</p>
<hr>
<h2>面向服务的体系结构（service-oriented architecture，SOA）</h2>
<p> <strong>Web Service</strong> 是一个数据接口，通过URL指定，就像一个web页面。
但它有别于web页面，它只是一种传达信息的方式。</p>
<p>一个典型的 <strong>Web Service</strong> 为页面提供了数据。</p>
<p>使用 &lt;AppML&gt;，HTML 显示为用户界面，&lt;AppML&gt; 提供数据。</p>
<p><strong>Original Web Services</strong> 设计使用了 XML 标志如 SOAP、WSDL 和 UDDI。</p>
<p><strong>Modern Web Services</strong> 比如 &lt;AppML&gt; 应用更加简单。 </p>
<ul>
<li>更容易理解 - 可以被我们阅读</li>
<li>轻量级 - 没有不必要的代码或标记</li>
<li>易于实施 - 没有所需的开发工具</li>
</ul>
<p>面向服务的体系结构（service-oriented architecture，SOA）是一个组件模型，它将应用程序的不同功能单元（称为服务）通过这些服务之间定义良好的接口和契约联系起来。接口是采用中立的方式进行定义的，它应该独立于实现服务的硬件平台、操作系统和编程语言。这使得构建在各种这样的系统中的服务可以以一种统一和通用的方式进行交互。</p>
<hr>
<h2>Web Services的优势</h2>
<ul>
<li>Web services 只需要少量的代码</li>
<li>Web services 被设计来处理一组有限的任务</li>
<li>Web services 使用基于HTTP的通信协议</li>
<li>Web services 独立于操作系统</li>
<li>Web services 独立于编程语言</li>
<li>Web services 可以连接不同的应用程序，系统和设备</li>
<li>Web Services 可以很容易地发布信息</li>
<li>Web Services 有利于快速应用程序开发</li>
</ul>
<p>例如一个Web services，可以设计一个小程序，提供其他最新的股票的交易价格的应用程序。</p>
<p>Web services使用HTTP协议与其他系统进行通信，Web服务是独立于操作系统和编程语言。</p>
<p>调用Web services的应用程序将始终使用HTTP协议发送请求。调用应用程序将永远不会关心其他计算机运行的操作系统或编程语言。</p>
<p>Web services可以为更多的企业创造新的可能性，因为它提供了一种简单的分发大量信息的方式。</p>
<p>比如：航班时刻表和机票预定系统。</p>
<hr>
<h2>云计算(Cloud Computing)</h2>
<p>云计算（Cloud Computing）是SOA的扩展：应用即服务（Application-as-a service），存储即服务（Storage-as-a-service），数据即服务（Data-as-a-service）。</p>
<p>对于大多数人，云计算是在web上存储数据：</p>
<ul type="square">
<li>邮寄很日历</li>
<li>文档和电子表格</li>
<li>书籍、笔记、待办事项列表</li>
<li>音乐、图片和电影</li>
<li>数据库和应用程序</li>
</ul>
<p>原因很明显：</p>
<ul type="square">
<li>有来自世界各地的访问数据</li>
<li>与他人分享我的数据</li>
<li>硬件升级或者崩溃</li>
</ul>
<p> &lt;AppML&gt; 可以很轻松地将数据库和应用程序放在云中。</p>
</div>
</div>
<div class="previous-next-links">
<div class="previous-design-link">← <a href="http://www.runoob.com/appml/appml-download.html" rel="prev"> AppML 下载</a> </div>
<div class="next-design-link"><a href="http://www.runoob.com/appml/appml-reference.html" rel="next"> AppML 参考手册</a> →</div>
</div>
<div class="sidebar-box ad-box ad-box-large">
<div class="ad-336280">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px" data-ad-client="ca-pub-5751451760833794" data-ad-slot="1691338467" data-ad-format="rectangle"></ins>
<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
</div>
</div>
</div>
</div>
<div class="fivecol last right-column">
<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
<div class="sidebar-box">
<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
<div class="qqinfo">
</div>
</div>
<div class="tab tab-light-blue">分类导航</div>
<div class="sidebar-box sidebar-cate">
<div class="sidebar-tree">
<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul> </div>
</div>
<br>
<div class="sidebar-box ad-box ad-box-large">
<div class="sidebar-box advertise-here">
<a href="javascript:void(0);">Advertisement</a>
</div>
<div class="ad-600160">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block;width:160px;height:600px" data-ad-client="ca-pub-5751451760833794" data-ad-slot="4106274865"></ins>
<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
</div>
</div>
</div></div>
</div>
<div id="footer" class="mar-t50">
<div class="w3cschoolcc-block">
<div class="w3cschoolcc cf">
<dl>
<dt>
在线实例
</dt>
<dd>
&middot;<a href="/html/html-examples.html">HTML 实例</a>
</dd>
<dd>
&middot;<a href="/css/css-examples.html">CSS 实例</a>
</dd>
<dd>
&middot;<a href="/js/js-examples.html">JavaScript 实例</a>
</dd>
<dd>
&middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
</dd>
<dd>
&middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
</dd>
<dd>
&middot;<a href="/xml/xml-examples.html">XML 实例</a>
</dd>
<dd>
&middot;<a href="/java/java-examples.html">Java 实例</a>
</dd>
</dl>
<dl>
<dt>
字符集&工具
</dt>
<dd>
&middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
</dd>
<dd>
&middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
</dd>
<dd>
&middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
</dd>
<dd>
&middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
</dd>
<dd>
&middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
</dd>
<dd>
&middot; <a href="/jsontool">JSON 格式化工具</a>
</dd>
</dl>
<dl>
<dt>
最新更新
</dt>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/event-contextmenu.html" title="jQuery contextmenu()  方法">jQuery contextm...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type() ...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim() ...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
</dd>
</dl>
<dl>
<dt>
站点信息
</dt>
<dd>
&middot;
<a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
</dd>
<dd>
&middot;
<a href="/disclaimer">免责声明</a>
</dd>
<dd>
&middot;
<a href="/aboutus">关于我们</a>
</dd>
<dd>
&middot;
<a href="/archives">文章归档</a>
</dd>
</dl>
<div class="search-share">
<div class="app-download">
<div>
<strong>关注微信</strong>
</div>
</div>
<div class="share">
<img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
</div>
</div>
</div>
</div>
<div class="w-1000 copyright">
Copyright &copy; 2013-2016 <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
<strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
</div>
</div>
<div class="fixed-btn">
<a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
<a class="qrcode" href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
<a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
<div id="bottom-qrcode" class="modal panel-modal hide fade in">
<h4>微信关注</h4>
<div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
</div>
</div>
<div style="display:none;">
<script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
<script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">AppML 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AppML 教程"  href="/appml/appml-tutorial.html" >
			AppML 教程			</a>
						<a target="_top" title="如何使用 AppML"  href="/appml/appml-howto.html" >
			如何使用 AppML			</a>
						<a target="_top" title="AppML 下载"  href="/appml/appml-download.html" >
			AppML 下载			</a>
						<a target="_top" title="AppML 架构"  href="/appml/appml-architecture.html" >
			AppML 架构			</a>
						<a target="_top" title="AppML 参考手册"  href="/appml/appml-reference.html" >
			AppML 参考手册			</a>
						<a target="_top" title="AppML 案例简介"  href="/appml/appml-case-intro.html" >
			AppML 案例简介			</a>
						<a target="_top" title="AppML 案例原型"  href="/appml/appml-case-prototyping.html" >
			AppML 案例原型			</a>
						<a target="_top" title="AppML 案例模型"  href="/appml/appml-case-models.html" >
			AppML 案例模型			</a>
						<a target="_top" title="AppML 案例模板"  href="/appml/appml-case-templates.html" >
			AppML 案例模板			</a>
						<a target="_top" title="AppML 案例 Employees"  href="/appml/appml-case-employees.html" >
			AppML 案例 Employees			</a>
						<a target="_top" title="AppML 案例 Customers"  href="/appml/appml-case-customers.html" >
			AppML 案例 Customers			</a>
						<a target="_top" title="AppML 案例 Products"  href="/appml/appml-case-products.html" >
			AppML 案例 Products			</a>
						<a target="_top" title="AppML 未来的应用程序"  href="/appml/appml-webstandards.html" >
			AppML 案例未来			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/appml/appml-architecture.html" rel="prev"> AppML 架构</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/appml/appml-case-intro.html" rel="next"> AppML 案例简介</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>
<span class="color_h1">&lt;AppML&gt;</span> 参考手册</h1>

<hr>
<h2> &lt;AppML&gt; 数据模型：</h2>

<div class="code notranslate">
<div>
&lt;appml security="<em>security</em>"&gt;<br><br>
&lt;datasource&gt;<br><em>Datasource definition goes here<br></em>&lt;/datasource&gt;<br><br>
&lt;filters&gt;<br><em>Filter definitions goes here (if any)<br></em>&lt;/filters&gt;<br><br>
&lt;update&gt;<br><em>Update definitions goes here (if any)<br></em>&lt;/update&gt;<br><br>
&lt;anything&gt;<br><em>Anything you want to add to the model<br></em>&lt;/anything&gt;<br><br>&lt;/appml&gt;</div>
</div>
<br><hr>
<h2>&lt;AppML&gt;安全</h2>
<p>&lt;AppML&gt; 安全通过 &lt;AppML&gt; 标签中的安全属性设置。</p>

<div class="code notranslate">
<div>
&lt;appml security="artists"&gt;</div>
</div>
<p>以上应用开头包含了安全定义属性，只允许 artists 用户登陆。</p>
<p>在这种情况下，用户登录的用户名必须为 "artists"组的成员。</p>
<hr>
<h2> &lt;datasource&gt; 元素</h2>
<p> &lt;AppML&gt;应用的的 &lt;datasource&gt;  元素定义了4个不同数据类型的:</p>
<h3>子元素（只有一个可以适用）</h3>
<table class="reference notranslate">
<tr>
<th width="30%">元素</th>
    <th>描述</th>
  </tr>
<tr>
<td>&lt;database&gt;</td>
    <td>定义数据类型</td>
  </tr>
<tr>
<td>&lt;xmlfile&gt;</td>
    <td>定义 XML 源文件</td>
  </tr>
<tr>
<td>&lt;csvfile&gt;</td>
    <td>定义一个逗号分隔的文本文件</td>
  </tr>
</table>
<br><hr>
<h2> &lt;database&gt; 元素</h2>
<p> &lt;database&gt; 元素定义了数据库 </p>
<h3>子元素</h3>
<table class="reference notranslate">
<tr>
<th width="30%">元素</th>
    <th>描述</th>
  </tr>
<tr>
<td>&lt;connection&gt;</td>
    <td>链接数据库名</td>
  </tr>
<tr>
<td>&lt;execute&gt;</td>
    <td>数据检索前执行的SQL语句（可选）</td>
  </tr>
<tr>
<td>&lt;sql&gt;</td>
    <td>用于检索数据的SQL语句</td>
  </tr>
<tr>
<td>&lt;maintable&gt;</td>
    <td>应用程序的主表（可选）</td>
  </tr>
<tr>
<td>&lt;keyfield&gt;</td>
    <td>主表的键字段（可选）</td>
  </tr>
</table>
<br><hr>
<h2>存储在SQL数据库中的数据</h2>
<p>这是面向数据的应用程序最常用的解决方案。</p>
<div class="code notranslate">
<div>
&lt;datasource&gt;<br>
&lt;database&gt;<br>
&lt;connection&gt;CDDataBase&lt;/connection&gt;<br>
&lt;sql&gt;SELECT Artist, Title, Country FROM CD_Catalog&lt;/sql&gt;<br>
&lt;/database&gt;<br>
&lt;/datasource&gt; 
</div>
</div>
<p>上面的模型可以从"CDDataBase"数据库的"CD_Catalog"表中选择三个数据选项 (Artist, Title, Country) 。 </p>
<p>结果返回的行数是未知的。</p>


<hr>
<h2>存储在 XML 文件中的数据</h2>
<p>&lt;AppML&gt; 可以从XML文件中读取数据: </p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code notranslate">
&lt;appml&gt;<br><br>
&lt;datasource&gt;<br>
&lt;xmlfile src="cd_catalog.xml"&gt;<br><br>
&lt;record&gt;CD&lt;/record&gt;<br><br>
&lt;item&gt;<br>
&lt;name&gt;Title&lt;/name&gt;<br>
&lt;nodename&gt;TITLE&lt;/nodename&gt;<br>
&lt;/item&gt;<br><br>
&lt;item&gt;<br>
&lt;name&gt;Artist&lt;/name&gt;<br>
&lt;nodename&gt;ARTIST&lt;/nodename&gt;<br>
&lt;/item&gt;<br>
&lt;item&gt;<br><br>
&lt;name&gt;Country&lt;/name&gt;<br>
&lt;nodename&gt;COUNTRY&lt;/nodename&gt;<br>
&lt;/item&gt;<br><br>
&lt;/xmlfile&gt;<br>
&lt;/datasource&gt;<br><br>
&lt;/appml&gt;</div>
<br><a class="tryitbtn" href="/try/try.php?filename=tryappml_from_xml" target="_blank">尝试一下 »</a>
</div>
<p>此方法能够将数据存储在服务器上的XML文件。</p>

<hr>
<h2>数据存储在 文本（Text）文件中</h2>
<p>&lt;AppML&gt; 可以从文本文件中读取数据： </p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code notranslate">
&lt;appml&gt;<br><br>
&lt;datasource&gt;<br>
&lt;csvfile src="cd_catalog.txt"&gt;<br><br>
&lt;item&gt;<br>
&lt;name&gt;Title&lt;/name&gt;<br>
&lt;index&gt;1&lt;/index&gt;<br>
&lt;/item&gt;<br><br>
&lt;item&gt;<br>
&lt;name&gt;Artist&lt;/name&gt;<br>
&lt;index&gt;2&lt;/index&gt;<br>
&lt;/item&gt;<br><br>
&lt;item&gt;<br>
&lt;name&gt;Price&lt;/name&gt;<br>
&lt;index&gt;5&lt;/index&gt;<br>
&lt;/item&gt;<br><br>
&lt;/csvfile&gt;<br>
&lt;/datasource&gt;<br><br>
&lt;/appml&gt; 
</div>
<br><a class="tryitbtn" href="/try/try.php?filename=tryappml_from_txt" target="_blank">尝试一下 »</a>
</div>
<p>此方法可以在服务器上的将数据存储在文本文件中。</p>
 
<hr>
<h2>如果需要你可以创建数据库</h2>
<p>&lt;AppML&gt; 如果有需要你可以创建一个数据库：</p>
<div class="code notranslate">
<div>
&lt;database&gt;<br>
&lt;connection&gt;CDDataBase&lt;/connection&gt;<br><br>
&lt;execute&gt;<br>
CREATE TABLE CD_catalog
(<br>CD_Id INT IDENTITY,<br>Title NVARCHAR(255),<br>Artist NVARCHAR(255),<br>Country NVARCHAR(255),<br>Company NVARCHAR(255),<br>Price NUMBER,Published INT)<br>
&lt;/execute&gt;<br><br>
&lt;/database&gt;
</div>
</div>
<p>完善快速原型模型！</p>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/appml/appml-architecture.html" rel="prev"> AppML 架构</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/appml/appml-case-intro.html" rel="next"> AppML 案例简介</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">AppML 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AppML 教程"  href="/appml/appml-tutorial.html" >
			AppML 教程			</a>
						<a target="_top" title="如何使用 AppML"  href="/appml/appml-howto.html" >
			如何使用 AppML			</a>
						<a target="_top" title="AppML 下载"  href="/appml/appml-download.html" >
			AppML 下载			</a>
						<a target="_top" title="AppML 架构"  href="/appml/appml-architecture.html" >
			AppML 架构			</a>
						<a target="_top" title="AppML 参考手册"  href="/appml/appml-reference.html" >
			AppML 参考手册			</a>
						<a target="_top" title="AppML 案例简介"  href="/appml/appml-case-intro.html" >
			AppML 案例简介			</a>
						<a target="_top" title="AppML 案例原型"  href="/appml/appml-case-prototyping.html" >
			AppML 案例原型			</a>
						<a target="_top" title="AppML 案例模型"  href="/appml/appml-case-models.html" >
			AppML 案例模型			</a>
						<a target="_top" title="AppML 案例模板"  href="/appml/appml-case-templates.html" >
			AppML 案例模板			</a>
						<a target="_top" title="AppML 案例 Employees"  href="/appml/appml-case-employees.html" >
			AppML 案例 Employees			</a>
						<a target="_top" title="AppML 案例 Customers"  href="/appml/appml-case-customers.html" >
			AppML 案例 Customers			</a>
						<a target="_top" title="AppML 案例 Products"  href="/appml/appml-case-products.html" >
			AppML 案例 Products			</a>
						<a target="_top" title="AppML 未来的应用程序"  href="/appml/appml-webstandards.html" >
			AppML 案例未来			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/appml/appml-reference.html" rel="prev"> AppML 参考手册</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/appml/appml-case-prototyping.html" rel="next"> AppML 案例原型</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>
<span class="color_h1">&lt;AppML&gt; </span>案例研究 - 简介</h1>
<hr>
<p class="intro">此案例研究演示了如何构建一个完整的 &lt;AppML&gt; 互联网应用程序，具有针对数据库中的若干表进行信息列举、编辑和搜索的功能。</p>

<hr>
<h2>我们将创建什么</h2>
<p>我们将使用已有的数据库，名为 Demo。</p>
<p>对于数据库中的每个表，我们将：</p>
<ul>
<li>创建原型模型</li>
	<li>创建原型 HTML 页面</li>
	<li>创建应用程序模型</li>
	<li>创建 HTML 模板</li>
	<li>创建完整的应用程序</li>
</ul>
<hr>
<h2>Demo 数据库</h2>
<p>对于案例研究，我们使用 MS Office 预装的 Northwind 数据库的一个子集。</p>
<p>这个数据库是众所周知的，不论是使用 PHP 还是经典 ASP 抑或是 ASP.NET，都易于测试。</p>
<p>Demo 数据库包含了若干带有数据的表，如下所示：</p>
<h2>Customers</h2>
<table class="reference notranslate">
    <tr>
      <th>Customer</th>
      <th>Address</th>
      <th>City</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Around the Horn</td>
      <td>120 Hanover Sq.</td>
      <td>London</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>Berglunds snabbkjøp</td>
      <td>Berguvsvägen 8</td>
      <td>Luleå </td>
      <td>Sweden</td>
    </tr>
    <tr>
      <td>Blauer See Delikatessen</td>
      <td>Forsterstr. 57</td>
      <td>Mannheim</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Blondel père et fils</td>
      <td>24, place Kléber</td>
      <td>Strasbourg</td>
      <td>France</td>
    </tr>
    <tr>
      <td>Bólido Comidas preparadas</td>
      <td>C/ Araquil, 67</td>
      <td>Madrid</td>
      <td>Spain</td>
    </tr>
    <tr>
      <td>Bottom-Dollar Markets</td>
      <td>23 Tsawassen Blvd.</td>
      <td>Tsawassen</td>
      <td>Canada</td>
    </tr>
</table>
<br />


<h2>Suppliers</h2>

<table class="reference notranslate">
    <tr>
    <th class="db">Supplier</th>
    <th class="db">Address</th>
    <th class="db">City</th>
    <th class="db">Country</th>
    </tr>
    <tr>
      <td>Exotic Liquid</td>
      <td>49 Gilbert St.</td>
      <td>London</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>New Orleans Cajun Delights</td>
      <td>P.O. Box 78934</td>
      <td>New Orleans</td>
      <td>USA</td>
    </tr>
    <tr>
      <td>Grandma Kelly's Homestead</td>
      <td>707 Oxford Rd.</td>
      <td>Ann Arbor</td>
      <td>USA</td>
    </tr>
    <tr>
      <td>Tokyo Traders</td>
      <td>9-8 SekimaiMusashino-shi</td>
      <td>Tokyo</td>
      <td>Japan</td>
    </tr>
    <tr>
      <td>Cooperativa de Quesos 'Las Cabras'</td>
      <td>Calle del Rosal 4</td>
      <td>Oviedo</td>
      <td>Spain</td>
    </tr>
    <tr>
      <td>Mayumi's</td>
      <td>92 Setsuko Chuo-ku</td>
      <td>Osaka</td>
      <td>Japan</td>
    </tr>
    <tr>
      <td>Pavlova, Ltd.</td>
      <td>74 Rose St. Moonie Ponds</td>
      <td>Melbourne</td>
      <td>Australia</td>
    </tr>
    <tr>
      <td>Specialty Biscuits, Ltd.</td>
      <td>29 King's Way</td>
      <td>Manchester</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>PB Kn ckebr d AB</td>
      <td>Kaloadagatan 13</td>
      <td>G teborg</td>
      <td>Sweden</td>
    </tr>
    <tr>
      <td>Refrescos Americanas LTDA</td>
      <td>Av. das Americanas 12.890</td>
      <td>S o Paulo</td>
      <td>Brazil</td>
    </tr>
</table>
<br />

<h2>Products
</h2>

<table class="reference notranslate">
    <tr>
      <th class="db">Produc</th>
      <th class="db">QuantityPerUnit</th>
      <th class="db">UnitPrice</th>
      <th class="db">UnitsInStock</th>
    </tr>
    <tr>
      <td>Chai</td>
      <td>10 boxes x 20 bags</td>
      <td>18</td>
      <td>39</td>
    </tr>
    <tr>
      <td>Chang</td>
      <td>24 - 12 oz bottles</td>
      <td>19</td>
      <td>17</td>
    </tr>
    <tr>
      <td>Aniseed Syrup</td>
      <td>12 - 550 ml bottles</td>
      <td>10</td>
      <td>13</td>
    </tr>
    <tr>
      <td>Chai</td>
      <td>10 boxes x 20 bags</td>
      <td>18</td>
      <td>39</td>
    </tr>
    <tr>
      <td>Chef Anton's Gumbo Mix</td>
      <td>36 boxes</td>
      <td>21</td>
      <td>0</td>
    </tr>
    <tr>
      <td>Grandma's Boysenberry Spread</td>
      <td>12 - 8 oz jars</td>
      <td>25</td>
      <td>120</td>
    </tr>
    <tr>
      <td>Uncle Bob's Organic Dried Pears</td>
      <td>12 - 1 lb pkgs.</td>
      <td>30</td>
      <td>15</td>
    </tr>
    <tr>
      <td>Northwoods Cranberry Sauce</td>
      <td>12 - 12 oz jars</td>
      <td>40</td>
      <td>6</td>
    </tr>
    <tr>
      <td>Mishi Kobe Niku</td>
      <td>18 - 500 g pkgs.</td>
      <td>97</td>
      <td>29</td>
    </tr>
    <tr>
      <td>Ikura</td>
      <td>12 - 200 ml jars</td>
      <td>31</td>
      <td>31</td>
    </tr>
</table>
<br><br>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/appml/appml-reference.html" rel="prev"> AppML 参考手册</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/appml/appml-case-prototyping.html" rel="next"> AppML 案例原型</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">AppML 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AppML 教程"  href="/appml/appml-tutorial.html" >
			AppML 教程			</a>
						<a target="_top" title="如何使用 AppML"  href="/appml/appml-howto.html" >
			如何使用 AppML			</a>
						<a target="_top" title="AppML 下载"  href="/appml/appml-download.html" >
			AppML 下载			</a>
						<a target="_top" title="AppML 架构"  href="/appml/appml-architecture.html" >
			AppML 架构			</a>
						<a target="_top" title="AppML 参考手册"  href="/appml/appml-reference.html" >
			AppML 参考手册			</a>
						<a target="_top" title="AppML 案例简介"  href="/appml/appml-case-intro.html" >
			AppML 案例简介			</a>
						<a target="_top" title="AppML 案例原型"  href="/appml/appml-case-prototyping.html" >
			AppML 案例原型			</a>
						<a target="_top" title="AppML 案例模型"  href="/appml/appml-case-models.html" >
			AppML 案例模型			</a>
						<a target="_top" title="AppML 案例模板"  href="/appml/appml-case-templates.html" >
			AppML 案例模板			</a>
						<a target="_top" title="AppML 案例 Employees"  href="/appml/appml-case-employees.html" >
			AppML 案例 Employees			</a>
						<a target="_top" title="AppML 案例 Customers"  href="/appml/appml-case-customers.html" >
			AppML 案例 Customers			</a>
						<a target="_top" title="AppML 案例 Products"  href="/appml/appml-case-products.html" >
			AppML 案例 Products			</a>
						<a target="_top" title="AppML 未来的应用程序"  href="/appml/appml-webstandards.html" >
			AppML 案例未来			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/appml/appml-case-intro.html" rel="prev"> AppML 案例简介</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/appml/appml-case-models.html" rel="next"> AppML 案例模型</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>
<span class="color_h1">&lt;AppML&gt; </span>案例研究 - 原型</h1>
<hr>
<p class="intro">此案例研究演示了如何构建一个完整的 &lt;AppML&gt; 互联网应用程序，具有针对数据库中的若干表进行信息列举、编辑和搜索的功能。</p>

<hr>
<h2>原型</h2>
<p>在本章中，我们将为数据库中的每个表建立一个原型模型。</p>
<p>原型是非常便于使用的开发应用程序的起点。</p>

<hr>
<h2>原型模型</h2>
<p>首先，为原型创建一个文件夹。该文件夹命名为 Prototypes。</p>
<p>然后，为数据库中的每个表创建一个原型模型。</p>
<p>使用 SELECT * from 每个表，并保存模型为 XML 文件：</p>
<div class="example">
<h2 class="example">模型：Proto_Customers.xml</h2>
<div class="example_code notranslate">
&lt;appml&gt;<br>
&lt;datasource&gt;<br>
  &lt;database&gt;<br>
  &lt;connection&gt;Demo&lt;/connection&gt;<br>
  &lt;sql&gt;SELECT * FROM Customers&lt;/sql&gt;<br>
  &lt;/database&gt;<br>
&lt;/datasource&gt;<br>
&lt;/appml&gt;
</div>
<br><h2 class="example">模型：Proto_Suppliers.xml</h2>
<div class="example_code notranslate">
&lt;appml&gt;<br>
&lt;datasource&gt;<br>
  &lt;database&gt;<br>
  &lt;connection&gt;Demo&lt;/connection&gt;<br>
  &lt;sql&gt;SELECT * FROM Suppliers&lt;/sql&gt;<br>
  &lt;/database&gt;<br>
&lt;/datasource&gt;<br>
&lt;/appml&gt;
</div>
<br><h2 class="example">模型：Proto_Products.xml</h2>
<div class="example_code notranslate">
&lt;appml&gt;<br>
&lt;datasource&gt;<br>
  &lt;database&gt;<br>
  &lt;connection&gt;Demo&lt;/connection&gt;<br>
  &lt;sql&gt;SELECT * FROM Products&lt;/sql&gt;<br>
  &lt;/database&gt;<br>
&lt;/datasource&gt;<br>
&lt;/appml&gt;
</div>
<br>
</div>
<br><hr>
<h2>原型视图</h2>
<p>创建一个原型视图，把它保存为 Demo_Prototype.html，并尝试一下：</p>
<div class="example">
<h2 class="example">视图：Demo_Prototype.htm</h2>
<div class="example_code notranslate">
	&lt;h1&gt;Customers&lt;/h1&gt;<br>&lt;div id="List01"&gt;&lt;/div&gt;<br><br>&lt;script src="appml.js"&gt;&lt;/script&gt;<br>
	&lt;script&gt;<br>customers=new 
	AppML("appml.php","Prototypes/Customers");<br>customers.run("List01");<br>&lt;/script&gt;</div>
<br><a class="tryitbtn" href="/try/try.php?filename=Demo_Prototype" target="_blank">尝试一下 »</a>
</div>
<br><hr>
<h2>现在把所有的合并在一起</h2>
<p>最后，通过少量 JavaScript 编码，为所有原型模型创建一个简单的原型页面：</p>
<div class="example">
<h2 class="example">Demo_Prototype_Views.htm</h2>
<div class="example_code notranslate">
	&lt;!DOCTYPE html&gt;<br>&lt;html&gt;<br>&lt;head&gt;<br>&lt;link rel="stylesheet" 
	href="appml.css" /&gt;<br>&lt;/head&gt;<br><br>&lt;body&gt;<br>&lt;h1&gt;Demo Applications&lt;/h1&gt;<br><br>&lt;button onclick='myOpen("Customers")'&gt;Customers&lt;/button&gt;<br>&lt;button 
	onclick='myOpen("Products")'&gt;Products&lt;/button&gt;<br>&lt;button 
	onclick='myOpen("Suppliers")'&gt;Suppliers&lt;/button&gt;<br>&lt;button 
	onclick='myOpen("Shippers")'&gt;Shippers&lt;/button&gt;<br>&lt;button 
	onclick='myOpen("Categories")'&gt;Categories&lt;/button&gt;<br>&lt;button 
	onclick='myOpen("Employees")'&gt;Employees&lt;/button&gt;<br>&lt;button 
	onclick='myOpen("Orders")'&gt;Orders&lt;/button&gt;<br>&lt;button 
	onclick='myOpen("OrderDetails")'&gt;OrderDetails&lt;/button&gt;<br>&lt;br&gt;&lt;br&gt;<br><br>&lt;div id="Place01"&gt;&lt;/div&gt;<br><br>&lt;script src="appml.js"&gt;&lt;/script&gt;<br>
	&lt;script&gt;<br>function myOpen(pname)<br>{<br>var app_obj<br>app_obj=new 
	AppML("appml.php","Prototypes/" + pname);<br>app_obj.run("Place01");<br>}<br>
	&lt;/script&gt;<br><br>&lt;/body&gt;<br>&lt;/html&gt;</div>
<br><a class="tryitbtn" href="/try/appml/Demo.htm" target="_blank">显示结果 »</a>
</div>
<br><br>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/appml/appml-case-intro.html" rel="prev"> AppML 案例简介</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/appml/appml-case-models.html" rel="next"> AppML 案例模型</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<form action="index.php">
<input class="placeholder" value="搜索……" name="s" autocomplete="off">
</form>
</div>
<div class="row">
<div class="col logo">
<h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
</div>
<div class="col right-list">
<button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
</div>
<div class="col search search-desktop last">
<form action="http://www.runoob.com/" target="_blank">
<input class="placeholder" id="s" name="s" value="搜索……" autocomplete="off">
</form>
</div>
</div>
</div>
<div class="container navigation">
<div class="row">
<div class="col nav">
<ul class="pc-nav">
<li><a href="http://www.runoob.com/">首页</a></li>
<li><a href="/html/html-tutorial.html">HTML</a></li>
<li><a href="/css/css-tutorial.html">CSS</a></li>
<li><a href="/js/js-tutorial.html">JavaScript</a></li>
<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
<li><a href="/sql/sql-tutorial.html">SQL</a></li>
<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
<li><a href="/php/php-tutorial.html">PHP</a></li>
<li><a href="/python/python-tutorial.html">Python</a></li>
<li><a href="/cprogramming/c-tutorial.html">C</a></li>
<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
<li><a href="/java/java-tutorial.html">Java</a></li>
<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
<li><a href="/sitemap">更多……</a></li>
</ul>
<ul class="mobile-nav">
<li><a href="http://www.runoob.com/">首页</a></li>
<li><a href="/html/html-tutorial.html">HTML</a></li>
<li><a href="/css/css-tutorial.html">CSS</a></li>
<li><a href="/js/js-tutorial.html">JavaScript</a></li>
<a href="javascript:void(0)" class="search-reveal">Search</a>
</ul>
</div>
</div>
</div>
<div class="container main">
<div class="row">
<div class="col left-column">
<div class="tab">AppML 教程</div>
<div class="sidebar-box gallery-list">
<div class="design" id="leftcolumn">
<a target="_top" title="AppML 教程" href="/appml/appml-tutorial.html">
AppML 教程 </a>
<a target="_top" title="如何使用 AppML" href="/appml/appml-howto.html">
如何使用 AppML </a>
<a target="_top" title="AppML 下载" href="/appml/appml-download.html">
AppML 下载 </a>
<a target="_top" title="AppML 架构" href="/appml/appml-architecture.html">
AppML 架构 </a>
<a target="_top" title="AppML 参考手册" href="/appml/appml-reference.html">
AppML 参考手册 </a>
<a target="_top" title="AppML 案例简介" href="/appml/appml-case-intro.html">
AppML 案例简介 </a>
<a target="_top" title="AppML 案例原型" href="/appml/appml-case-prototyping.html">
AppML 案例原型 </a>
<a target="_top" title="AppML 案例模型" href="/appml/appml-case-models.html">
AppML 案例模型 </a>
<a target="_top" title="AppML 案例模板" href="/appml/appml-case-templates.html">
AppML 案例模板 </a>
<a target="_top" title="AppML 案例 Employees" href="/appml/appml-case-employees.html">
AppML 案例 Employees </a>
<a target="_top" title="AppML 案例 Customers" href="/appml/appml-case-customers.html">
AppML 案例 Customers </a>
<a target="_top" title="AppML 案例 Products" href="/appml/appml-case-products.html">
AppML 案例 Products </a>
<a target="_top" title="AppML 未来的应用程序" href="/appml/appml-webstandards.html">
AppML 案例未来 </a>
</div>
</div>
</div> <div class="col middle-column">
<div class="article">
<div class="article-heading-ad">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px" data-ad-client="ca-pub-5751451760833794" data-ad-slot="1691338467" data-ad-format="horizontal"></ins>
<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
</div>
<div class="previous-next-links">
<div class="previous-design-link">← <a href="http://www.runoob.com/appml/appml-case-prototyping.html" rel="prev"> AppML 案例原型</a> </div>
<div class="next-design-link"><a href="http://www.runoob.com/appml/appml-case-templates.html" rel="next"> AppML 案例模板</a> →</div>
</div>
<div class="article-body">
<div class="article-intro" id="content">
<h1>
<span class="color_h1">&lt;AppML&gt; </span>案例研究 - 应用程序模型</h1>
<hr>
<p class="intro">此案例研究演示了如何构建一个完整的 &lt;AppML&gt; 互联网应用程序，具有针对数据库中的若干表进行信息列举、编辑和搜索的功能。</p>
<hr>
<h2>应用程序模型</h2>
<p>在本章中，我们将为数据库中的 Customers 表建立一个完整的应用程序模型。</p>
<hr>
<h2>&lt;AppML&gt; 过滤器</h2>
<p>如需允许过滤 &lt;AppML&gt; 数据，只需简单地向模型添加一个 &lt;filters&gt; 元素：
</p>
<div class="example">
<h2 class="example">实例：</h2>
<div class="example_code notranslate">
&lt;filters&gt;<br>&lt;query&gt;<br> &lt;field label="Customer"&gt;CustomerName&lt;/field&gt;<br>
&lt;field&gt;City&lt;/field&gt;<br> &lt;field&gt;Country&lt;/field&gt;<br>&lt;/query&gt;<br>
&lt;order&gt;<br> &lt;field label="Customer"&gt;CustomerName&lt;/field&gt;<br>
&lt;field&gt;City&lt;/field&gt;<br> &lt;field&gt;Country&lt;/field&gt;<br>&lt;/order&gt;<br>
&lt;/filters&gt;
</div>
</div>
<p>如需全面了解，请参阅 &lt;AppML&gt; <a href="appml-reference.html">参考手册</a>。</p>
<hr>
<h2>&lt;AppML&gt; 更新</h2>
<p>如需允许更新 &lt;AppML&gt; 数据，只需简单地向模型添加一个 &lt;update&gt; 元素：
</p>
<div class="example">
<h2 class="example">实例：</h2>
<div class="example_code notranslate">&lt;update&gt;<br>
&lt;item&gt;&lt;name&gt;LastName&lt;/name&gt;&lt;/item&gt;<br>
&lt;item&gt;&lt;name&gt;FirstName&lt;/name&gt;&lt;/item&gt;<br> &lt;item&gt;&lt;name&gt;BirthDate&lt;/name&gt;&lt;/item&gt;<br>
&lt;item&gt;&lt;name&gt;Photo&lt;/name&gt;&lt;/item&gt;<br> &lt;item&gt;&lt;name&gt;Notes&lt;/name&gt;&lt;/item&gt;<br>
&lt;/update&gt;
</div>
</div>
<p>且向 &lt;database&gt; 元素添加一个 &lt;maintable&gt; 和 &lt;keyfield&gt; 元素：
</p>
<div class="example">
<h2 class="example">实例：</h2>
<div class="example_code notranslate">&lt;maintable&gt;Customers&lt;/maintable&gt;<br>&lt;keyfield&gt;CustomerID&lt;/keyfield&gt;
</div>
</div>
<p>如需全面了解，请参阅 &lt;AppML&gt; <a href="appml-reference.html">参考手册</a>。</p>
<hr>
<h2>&lt;AppML&gt; 安全</h2>
<p>您可以通过向 &lt;AppML&gt; 标签添加一个 security 属性来很容易地为 &lt;AppML&gt; 模型添加安全。</p>
<div class="example">
<h2 class="example">实例：</h2>
<div class="example_code notranslate">
&lt;appml
<strong><span class="marked">security="admin"</span></strong>&gt;<br><br>
</div>
</div>
<p>
在上面的实例中，只有用户登录成为用户组 "admin" 的会员才能访问模型。</p>
<p>如需为 &lt;update&gt; 元素设置安全，只需简单地向 &lt;update&gt; 元素添加一个 security 属性：</p>
<div class="example">
<h2 class="example">实例：</h2>
<div class="example_code notranslate">
&lt;update
<strong><span class="marked">security="admin"</span></strong>&gt;<br>
&lt;item&gt;&lt;name&gt;LastName&lt;/name&gt;&lt;/item&gt;<br>
&lt;item&gt;&lt;name&gt;FirstName&lt;/name&gt;&lt;/item&gt;<br> &lt;item&gt;&lt;name&gt;BirthDate&lt;/name&gt;&lt;/item&gt;<br>
&lt;item&gt;&lt;name&gt;Photo&lt;/name&gt;&lt;/item&gt;<br> &lt;item&gt;&lt;name&gt;Notes&lt;/name&gt;&lt;/item&gt;<br>
&lt;/update&gt;</div>
</div>
<br><hr>
<h2>完整的 Customers 模型</h2>
<p>在本章中，我们将为数据库中的每个表设立一个应用程序模型。</p>
<p>创建一个名为 Models 的新文件夹。在 Models 文件夹中，为每个应用程序创建一个模型。</p>
<div class="example">
<h2 class="example">模型：Customers.xml</h2>
<div class="example_code notranslate">
&lt;appml security=""&gt;<br><br>&lt;datasource&gt;<br>&lt;database&gt;<br> &lt;connection&gt;Demo&lt;/connection&gt;<br>
&lt;maintable&gt;Customers&lt;/maintable&gt;<br> &lt;keyfield&gt;CustomerID&lt;/keyfield&gt;<br> &lt;sql&gt;SELECT * FROM Customers&lt;/sql&gt;<br>
&lt;orderby&gt;CustomerName,City,Country&lt;/orderby&gt;<br>&lt;/database&gt;<br>&lt;/datasource&gt;<br><br>&lt;filters&gt;<br>&lt;query&gt;<br> &lt;field label="Customer"&gt;CustomerName&lt;/field&gt;<br>
&lt;field&gt;City&lt;/field&gt;<br> &lt;field&gt;Country&lt;/field&gt;<br>&lt;/query&gt;<br>&lt;order&gt;<br>
&lt;field label="Customer"&gt;CustomerName&lt;/field&gt;<br> &lt;field&gt;City&lt;/field&gt;<br>
&lt;field&gt;Country&lt;/field&gt;<br>&lt;/order&gt;<br>&lt;/filters&gt;<br><br>&lt;update security="admin"&gt;<br> &lt;item&gt;&lt;name&gt;CustomerName&lt;/name&gt;&lt;/item&gt;<br>
&lt;item&gt;&lt;name&gt;ContactName&lt;/name&gt;&lt;/item&gt;<br> &lt;item&gt;&lt;name&gt;Address&lt;/name&gt;&lt;/item&gt;<br>
&lt;item&gt;&lt;name&gt;PostalCode&lt;/name&gt;&lt;/item&gt;<br> &lt;item&gt;&lt;name&gt;City&lt;/name&gt;&lt;/item&gt;<br>
&lt;item&gt;&lt;name&gt;Country&lt;/name&gt;&lt;/item&gt;<br>&lt;/update&gt;<br><br>&lt;/appml&gt;
</div>
<br>
</div>
<br><hr>
<h2>模型视图</h2>
<p>创建一个模型视图，把它保存为 Demo_Model.html，并尝试一下：</p>
<div class="example">
<h2 class="example">视图：Demo_Model.htm</h2>
<div class="example_code notranslate">
&lt;h1&gt;Customers&lt;/h1&gt;<br>&lt;div id="List01"&gt;&lt;/div&gt;<br><br>&lt;script src="appml.js"&gt;&lt;/script&gt;<br>
&lt;script&gt;<br>customers=new
AppML("appml.htmlx","Models/Customers");<br>customers.run("List01");<br>&lt;/script&gt;</div>
<br><a class="tryitbtn" href="/try/try.php?filename=Demo_Model" target="_blank">尝试一下 »</a>
</div>
<br><hr>
<h2>现在把所有的合并在一起</h2>
<p>然后，通过少量 JavaScript 编码，为所有模型创建一个测试页面：</p>
<div class="example">
<h2 class="example">Demo_Model_Views.htm</h2>
<div class="example_code notranslate">
&lt;!DOCTYPE html&gt;<br>&lt;html&gt;<br>&lt;head&gt;<br>&lt;link rel="stylesheet"
href="appml.css" /&gt;<br>&lt;/head&gt;<br><br>&lt;body&gt;<br>&lt;h1&gt;Demo Applications&lt;/h1&gt;<br><br>&lt;button onclick='myOpen("Customers")'&gt;Customers&lt;/button&gt;<br>&lt;button
onclick='myOpen("Products")'&gt;Products&lt;/button&gt;<br>&lt;button
onclick='myOpen("Suppliers")'&gt;Suppliers&lt;/button&gt;<br>&lt;button
onclick='myOpen("Shippers")'&gt;Shippers&lt;/button&gt;<br>&lt;button
onclick='myOpen("Categories")'&gt;Categories&lt;/button&gt;<br>&lt;button
onclick='myOpen("Employees")'&gt;Employees&lt;/button&gt;<br>&lt;button
onclick='myOpen("Orders")'&gt;Orders&lt;/button&gt;<br>&lt;button
onclick='myOpen("OrderDetails")'&gt;OrderDetails&lt;/button&gt;<br>&lt;br&gt;&lt;br&gt;<br><br>&lt;div id="Place01"&gt;&lt;/div&gt;<br><br>&lt;script src="appml.js"&gt;&lt;/script&gt;<br>
&lt;script&gt;<br>function myOpen(pname)<br>{<br>var app_obj<br>app_obj=new
AppML("appml.php","Models/" + pname);<br>app_obj.run("Place01");<br>}<br>
&lt;/script&gt;<br><br>&lt;/body&gt;<br>&lt;/html&gt;</div>
<br><a class="tryitbtn" href="/try/try.php?filename=Demo_Model_Views" target="_blank">显示结果 »</a>
</div>
<br><br>
</div>
</div>
<div class="previous-next-links">
<div class="previous-design-link">← <a href="http://www.runoob.com/appml/appml-case-prototyping.html" rel="prev"> AppML 案例原型</a> </div>
<div class="next-design-link"><a href="http://www.runoob.com/appml/appml-case-templates.html" rel="next"> AppML 案例模板</a> →</div>
</div>
<div class="sidebar-box ad-box ad-box-large">
<div class="ad-336280">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px" data-ad-client="ca-pub-5751451760833794" data-ad-slot="1691338467" data-ad-format="rectangle"></ins>
<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
</div>
</div>
</div>
</div>
<div class="fivecol last right-column">
<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
<div class="sidebar-box">
<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
<div class="qqinfo">
</div>
</div>
<div class="tab tab-light-blue">分类导航</div>
<div class="sidebar-box sidebar-cate">
<div class="sidebar-tree">
<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul> </div>
</div>
<br>
<div class="sidebar-box ad-box ad-box-large">
<div class="sidebar-box advertise-here">
<a href="javascript:void(0);">Advertisement</a>
</div>
<div class="ad-600160">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block;width:160px;height:600px" data-ad-client="ca-pub-5751451760833794" data-ad-slot="4106274865"></ins>
<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
</div>
</div>
</div></div>
</div>
<div id="footer" class="mar-t50">
<div class="w3cschoolcc-block">
<div class="w3cschoolcc cf">
<dl>
<dt>
在线实例
</dt>
<dd>
&middot;<a href="/html/html-examples.html">HTML 实例</a>
</dd>
<dd>
&middot;<a href="/css/css-examples.html">CSS 实例</a>
</dd>
<dd>
&middot;<a href="/js/js-examples.html">JavaScript 实例</a>
</dd>
<dd>
&middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
</dd>
<dd>
&middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
</dd>
<dd>
&middot;<a href="/xml/xml-examples.html">XML 实例</a>
</dd>
<dd>
&middot;<a href="/java/java-examples.html">Java 实例</a>
</dd>
</dl>
<dl>
<dt>
字符集&工具
</dt>
<dd>
&middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
</dd>
<dd>
&middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
</dd>
<dd>
&middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
</dd>
<dd>
&middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
</dd>
<dd>
&middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
</dd>
<dd>
&middot; <a href="/jsontool">JSON 格式化工具</a>
</dd>
</dl>
<dl>
<dt>
最新更新
</dt>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/event-contextmenu.html" title="jQuery contextmenu()  方法">jQuery contextm...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type() ...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim() ...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
</dd>
</dl>
<dl>
<dt>
站点信息
</dt>
<dd>
&middot;
<a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
</dd>
<dd>
&middot;
<a href="/disclaimer">免责声明</a>
</dd>
<dd>
&middot;
<a href="/aboutus">关于我们</a>
</dd>
<dd>
&middot;
<a href="/archives">文章归档</a>
</dd>
</dl>
<div class="search-share">
<div class="app-download">
<div>
<strong>关注微信</strong>
</div>
</div>
<div class="share">
<img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
</div>
</div>
</div>
</div>
<div class="w-1000 copyright">
Copyright &copy; 2013-2016 <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
<strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
</div>
</div>
<div class="fixed-btn">
<a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
<a class="qrcode" href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
<a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
<div id="bottom-qrcode" class="modal panel-modal hide fade in">
<h4>微信关注</h4>
<div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
</div>
</div>
<div style="display:none;">
<script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
<script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">AppML 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AppML 教程"  href="/appml/appml-tutorial.html" >
			AppML 教程			</a>
						<a target="_top" title="如何使用 AppML"  href="/appml/appml-howto.html" >
			如何使用 AppML			</a>
						<a target="_top" title="AppML 下载"  href="/appml/appml-download.html" >
			AppML 下载			</a>
						<a target="_top" title="AppML 架构"  href="/appml/appml-architecture.html" >
			AppML 架构			</a>
						<a target="_top" title="AppML 参考手册"  href="/appml/appml-reference.html" >
			AppML 参考手册			</a>
						<a target="_top" title="AppML 案例简介"  href="/appml/appml-case-intro.html" >
			AppML 案例简介			</a>
						<a target="_top" title="AppML 案例原型"  href="/appml/appml-case-prototyping.html" >
			AppML 案例原型			</a>
						<a target="_top" title="AppML 案例模型"  href="/appml/appml-case-models.html" >
			AppML 案例模型			</a>
						<a target="_top" title="AppML 案例模板"  href="/appml/appml-case-templates.html" >
			AppML 案例模板			</a>
						<a target="_top" title="AppML 案例 Employees"  href="/appml/appml-case-employees.html" >
			AppML 案例 Employees			</a>
						<a target="_top" title="AppML 案例 Customers"  href="/appml/appml-case-customers.html" >
			AppML 案例 Customers			</a>
						<a target="_top" title="AppML 案例 Products"  href="/appml/appml-case-products.html" >
			AppML 案例 Products			</a>
						<a target="_top" title="AppML 未来的应用程序"  href="/appml/appml-webstandards.html" >
			AppML 案例未来			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/appml/appml-case-models.html" rel="prev"> AppML 案例模型</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/appml/appml-case-employees.html" rel="next"> AppML 案例 Employees</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>
<span class="color_h1">&lt;AppML&gt; </span>案例研究 - HTML 模板</h1>
<hr>
<p class="intro">此案例研究演示了如何构建一个完整的 &lt;AppML&gt; 互联网应用程序，具有针对数据库中的若干表进行信息列举、编辑和搜索的功能。</p>

<hr>
<h2>添加 HTML 模板</h2>
<p>在本章中，我们将演示如何向 HTML 页面添加 HTML 模板。</p>

<hr>
<h2>列出客户</h2>
<div class="example">
<h2 class="example">HTML - View</h2>
<div class="example_code notranslate">
&lt;h1&gt;Customers&lt;/h1&gt;<br><br>&lt;div id="List01"&gt;&lt;/div&gt;&lt;br&gt;<br><br>&lt;table 
id="Template01" class="appmltable" style="display:none"&gt;<br>&lt;tr&gt;<br>
 
&lt;th&gt;Customer&lt;/th&gt;<br>  &lt;th&gt;City&lt;/th&gt;<br>  &lt;th&gt;Country&lt;/th&gt;<br>&lt;/tr&gt;<br>
&lt;tr id="appml_row"&gt;<br>  &lt;td&gt;#CustomerName#&lt;/td&gt;<br>  &lt;td&gt;#City#&lt;/td&gt;<br>
 
&lt;td&gt;#Country#&lt;/td&gt;<br>&lt;/tr&gt;<br>&lt;/table&gt; <br><br>&lt;script src="appml.js"&gt;&lt;/script&gt;<br>
	&lt;script&gt;<br>var customers<br>
	customers=new AppML("appml.php","Models/Customers");<br>
	customers.run("List01","Template01");<br>&lt;/script&gt;</div>
<br><a class="tryitbtn" href="/try/try.php?filename=App_Customers_List" target="_blank">尝试一下 »</a>
</div>
<br><hr>
<h2>列出客户和客户表单</h2>
<p>通过巧妙地使用模板，可以很容易添加 &lt;AppML&gt; 列表对象和 &lt;AppML&gt; 表单之间的链接：</p>
<div class="example">
<h2 class="example">HTML - View</h2>
<div class="example_code notranslate">
&lt;h1&gt;Customers&lt;/h1&gt;<br>&lt;div id="Form01"&gt;&lt;/div&gt;&lt;br&gt;<br>&lt;div 
id="List01"&gt;&lt;/div&gt;&lt;br&gt;<br><br>&lt;table id="Template01" class="appmltable" 
style="width:100%;display:none"&gt;<br>&lt;tr&gt;<br>&lt;th&gt;&lt;/th&gt;<br>&lt;th&gt;Customer&lt;/th&gt;<br>
&lt;th&gt;City&lt;/th&gt;<br>&lt;th&gt;Country&lt;/th&gt;<br>&lt;/tr&gt;<br>&lt;tr id="appml_row"&gt;<br>&lt;td 
style="cursor:pointer" onclick="openForm('#CustomerID#')"&gt;<br>&lt;img 
src="images/appmlFolder.png"&gt;&lt;/td&gt;<br>&lt;td&gt;#CustomerName#&lt;/td&gt;<br>&lt;td&gt;#City#&lt;/td&gt;<br>
&lt;td&gt;#Country#&lt;/td&gt;<br>&lt;/tr&gt;<br>&lt;/table&gt; <br><br>&lt;script 
src="appml.js"&gt;&lt;/script&gt;<br>&lt;script&gt;<br>var customers,customerForm;<br>
customers=new AppML("appml.php","Models/Customers");<br>
customers.run("List01","Template01");<br><br>function openForm(id)<br>{<br>
customerForm=new AppML("appml.php","Models/Customers");<br>
customerForm.displayType="form";<br>customerForm.run("Form01","",id);<br>}<br>
&lt;/script&gt;
</div>
<br><a class="tryitbtn" href="/try/try.php?filename=App_Customers_Form" target="_blank">尝试一下 »</a>
</div>
<br><hr>
<h2>列出客户和客户订单</h2>
<p>通过巧妙地使用模板，可以很容易添加 &lt;AppML&gt; 列表对象和所链接的列表之间的链接：</p>
<div class="example">
<h2 class="example">HTML - View</h2>
<div class="example_code notranslate">
&lt;h1&gt;Customers&lt;/h1&gt;<br>&lt;div id="List01"&gt;&lt;/div&gt;&lt;br&gt;<br>&lt;div 
id="Orders01"&gt;&lt;/div&gt;&lt;br&gt;<br><br>&lt;table id="Template01" class="appmltable" 
style="width:100%;display:none"&gt;<br>&lt;tr&gt;<br>&lt;th&gt;Customer&lt;/th&gt;<br>
&lt;th&gt;City&lt;/th&gt;<br>&lt;th&gt;Country&lt;/th&gt;<br>&lt;th&gt;&lt;/th&gt;<br>&lt;/tr&gt;<br>&lt;tr 
id="appml_row"&gt;<br>&lt;td&gt;#CustomerName#&lt;/td&gt;<br>&lt;td&gt;#City#&lt;/td&gt;<br>
&lt;td&gt;#Country#&lt;/td&gt;<br>&lt;td&gt;&lt;a href='' 
onclick='openOrders("#CustomerID#");return false;'&gt;Orders&lt;/a&gt;&lt;/td&gt;<br>&lt;/tr&gt;<br>
&lt;/table&gt; <br><br>&lt;table id="Template02" class="appmltable" 
style="width:100%;display:none"&gt;<br>&lt;tr&gt;<br>&lt;th&gt;Customer&lt;/th&gt;<br>
&lt;th&gt;Date&lt;/th&gt;<br>&lt;th&gt;Salesperson&lt;/th&gt;<br>&lt;th&gt;Shipper&lt;/th&gt;<br>&lt;/tr&gt;<br>&lt;tr 
id="appml_row"&gt;<br>&lt;td&gt;#CustomerName#&lt;/td&gt;<br>&lt;td&gt;#OrderDate#&lt;/td&gt;<br>
&lt;td&gt;#Salesperson#&lt;/td&gt;<br>&lt;td&gt;#ShipperName#&lt;/td&gt;<br>&lt;/tr&gt;<br>&lt;/table&gt; <br><br>&lt;script src="appml.js"&gt;&lt;/script&gt;<br>&lt;script&gt;<br>var customers,orders;<br>
customers=new AppML("appml.php","Models/Customers");<br>
customers.run("List01","Template01");<br>function openOrders(id)<br>{<br>
orders=new AppML("appml.php","Models/Orders");<br>
orders.setQuery("orders.customerid",id);<br>orders.commands=false;<br>
orders.run("Orders01","Template02");<br>}<br>&lt;/script&gt;
</div>
<br><a class="tryitbtn" href="/try/try.php?filename=App_Customers_Orders" target="_blank">尝试一下 »</a>
</div>
<br><hr>
<h2>现在把所有的合并在一起</h2>
<p>最后，通过少量代码复制，我们就可以完成项目。</p>
<div class="example">

<h2 class="example">客户列表、表单和订单</h2>
<div class="example_code notranslate">
&lt;h1&gt;Customers&lt;/h1&gt;<br><br>&lt;div id="List01"&gt;<br>&lt;table id="appml_list" 
class="appmllist"&gt;<br>&lt;tr&gt;<br>&lt;th&gt;Customer&lt;/th&gt;<br>&lt;th&gt;City&lt;/th&gt;<br>
&lt;th&gt;Country&lt;/th&gt;<br>&lt;th&gt;&lt;/th&gt;<br>&lt;/tr&gt;<br>&lt;tr id="appml_row"&gt;<br>
&lt;td&gt;#CustomerName#&lt;/td&gt;<br>&lt;td&gt;#City#&lt;/td&gt;<br>&lt;td&gt;#Country#&lt;/td&gt;<br>&lt;td&gt;&lt;a 
href='' onclick='openOrders("#CustomerID#");return false;'&gt;Orders&lt;/a&gt;&lt;/td&gt;<br>
&lt;/tr&gt;<br>&lt;/table&gt; <br>&lt;/div&gt;<br><br>&lt;div 
id="List02"&gt;&lt;/div&gt;<br><br>&lt;script src="appml.js"&gt;&lt;/script&gt;<br>
	&lt;script&gt;<br>var Customers,Orders<br>
Customers=new AppML("appml.php","Models/Customers");<br>Customers.run("List01");<br><br>function openOrders(id)<br>{<br>var Orders=new 
AppML("appml.php","Models/Orders");<br>Orders.setQuery("orders.customerid",id);<br>
Orders.commands=false;<br>
Orders.run("List02");<br>}<br>&lt;/script&gt;</div>
<br><a class="tryitbtn" href="/try/try.php?filename=App_Customers" target="_blank">尝试一下 »</a>
</div>
<p>在接下来的章节中，您可以看到更多带有完整源代码的应用程序。</p>

<hr>
<br>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/appml/appml-case-models.html" rel="prev"> AppML 案例模型</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/appml/appml-case-employees.html" rel="next"> AppML 案例 Employees</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">AppML 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AppML 教程"  href="/appml/appml-tutorial.html" >
			AppML 教程			</a>
						<a target="_top" title="如何使用 AppML"  href="/appml/appml-howto.html" >
			如何使用 AppML			</a>
						<a target="_top" title="AppML 下载"  href="/appml/appml-download.html" >
			AppML 下载			</a>
						<a target="_top" title="AppML 架构"  href="/appml/appml-architecture.html" >
			AppML 架构			</a>
						<a target="_top" title="AppML 参考手册"  href="/appml/appml-reference.html" >
			AppML 参考手册			</a>
						<a target="_top" title="AppML 案例简介"  href="/appml/appml-case-intro.html" >
			AppML 案例简介			</a>
						<a target="_top" title="AppML 案例原型"  href="/appml/appml-case-prototyping.html" >
			AppML 案例原型			</a>
						<a target="_top" title="AppML 案例模型"  href="/appml/appml-case-models.html" >
			AppML 案例模型			</a>
						<a target="_top" title="AppML 案例模板"  href="/appml/appml-case-templates.html" >
			AppML 案例模板			</a>
						<a target="_top" title="AppML 案例 Employees"  href="/appml/appml-case-employees.html" >
			AppML 案例 Employees			</a>
						<a target="_top" title="AppML 案例 Customers"  href="/appml/appml-case-customers.html" >
			AppML 案例 Customers			</a>
						<a target="_top" title="AppML 案例 Products"  href="/appml/appml-case-products.html" >
			AppML 案例 Products			</a>
						<a target="_top" title="AppML 未来的应用程序"  href="/appml/appml-webstandards.html" >
			AppML 案例未来			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/appml/appml-case-templates.html" rel="prev"> AppML 案例模板</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/appml/appml-case-customers.html" rel="next"> AppML 案例 Customers</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<link rel="stylesheet" type="text/css" href="http://www.runoob.com/try/appml/appml.css" >
<h1>
<span class="color_h1">&lt;AppML&gt; </span>Employees - 完整的应用程序</h1>
<hr>

<div id="Form01"></div>
<div id="List01"></div>
<br>

<table id="Template01" class="appmltable" style="width:100%;display:none">
<tr>
  <th></th>
  <th>Last Name</th>
  <th>First Name</th>
  <th>Date of Birth</th>
</tr>
<tr id="appml_row">
  <td style="cursor:pointer" onclick="employeesForm.run('Form01','Template02','#EmployeeID#')">
  <img src="/try/appml/Images/appmlPlus.png"></td>
  <td>#LastName#</td>
  <td>#FirstName#</td>
  <td>#BirthDate#</td>
</tr>
</table>

<div id="Template02" class="appmlform" style="width:100%;display:none">
<label>Last Name:</label><input id="LastName">
<label>First Name:</label><input id="FirstName">
<label>Date of Birth:</label><input id="BirthDate">
<label>Photo:</label><input id="Photo">
<label>Notes:</label><input id="Notes">
</div>
<br><hr>
<h2>源代码</h2>
<div class="example">
<h2 class="example">HTML 源代码</h2>
<div class="example_code notranslate">
	&lt;html&gt;<br>&lt;body&gt;<br><br>&lt;h1&gt;Employees&lt;/h1&gt;<br><br>
	&lt;div id="Form01"&gt;&lt;/div&gt;<br>&lt;div id="List01"&gt;&lt;/div&gt;<br>&lt;br&gt;<br><br>&lt;table 
	id="Template01" class="appmltable" style="width:100%;display:none"&gt;<br>&lt;tr&gt;<br>
	&lt;th&gt;&lt;/th&gt;<br>&lt;th&gt;Last Name&lt;/th&gt;<br>&lt;th&gt;First Name&lt;/th&gt;<br>&lt;th&gt;Date of 
	Birth&lt;/th&gt;<br>&lt;/tr&gt;<br>&lt;tr id="appml_row"&gt;<br>&lt;td style="cursor:pointer" 
	onclick="employeesForm.run('Form01','Template02','#EmployeeID#')"&gt;<br>&lt;img 
	src="Images/appmlPlus.png"&gt;&lt;/td&gt;<br>&lt;td&gt;#LastName#&lt;/td&gt;<br>
	&lt;td&gt;#FirstName#&lt;/td&gt;<br>&lt;td&gt;#BirthDate#&lt;/td&gt;<br>&lt;/tr&gt;<br>&lt;/table&gt;<br><br>
	&lt;div id="Template02" class="appmlform" style="width:100%;display:none"&gt;<br>
	&lt;label&gt;Last Name:&lt;/label&gt;&lt;input id="LastName"&gt;<br>&lt;label&gt;First 
	Name:&lt;/label&gt;&lt;input id="FirstName"&gt;<br>&lt;label&gt;Date of Birth:&lt;/label&gt;&lt;input 
	id="BirthDate"&gt;<br>&lt;label&gt;Photo:&lt;/label&gt;&lt;input id="Photo"&gt;<br>
	&lt;label&gt;Notes:&lt;/label&gt;&lt;input id="Notes"&gt;<br>&lt;/div&gt;<br><br>&lt;script src="appml.js"&gt;&lt;/script&gt;<br>&lt;script&gt;<br>
	var employees,employeesForm<br>employees=new 
	AppML("appml.php","Models/Employees");<br>
	employees.run("List01","Template01");<br>employeesForm=new 
	AppML("appml.php","Models/Employees");<br>employeesForm.displayType="form";<br>&lt;/script&gt;<br><br>&lt;/body&gt;<br>&lt;/html&gt;</d></div>

</div>
<script src="/try/appml/appml.js"></script>

<script>
var employees,employeesForm
employees=new AppML("http://test.runoob.com/appml/appml.php","./Models/Employees.xml");
employees.run("List01","Template01");
employeesForm=new AppML("http://test.runoob.com/appml/appml.php","./Models/Employees.xml");
employeesForm.displayType="form";
</script>
			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/appml/appml-case-templates.html" rel="prev"> AppML 案例模板</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/appml/appml-case-customers.html" rel="next"> AppML 案例 Customers</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">AppML 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AppML 教程"  href="/appml/appml-tutorial.html" >
			AppML 教程			</a>
						<a target="_top" title="如何使用 AppML"  href="/appml/appml-howto.html" >
			如何使用 AppML			</a>
						<a target="_top" title="AppML 下载"  href="/appml/appml-download.html" >
			AppML 下载			</a>
						<a target="_top" title="AppML 架构"  href="/appml/appml-architecture.html" >
			AppML 架构			</a>
						<a target="_top" title="AppML 参考手册"  href="/appml/appml-reference.html" >
			AppML 参考手册			</a>
						<a target="_top" title="AppML 案例简介"  href="/appml/appml-case-intro.html" >
			AppML 案例简介			</a>
						<a target="_top" title="AppML 案例原型"  href="/appml/appml-case-prototyping.html" >
			AppML 案例原型			</a>
						<a target="_top" title="AppML 案例模型"  href="/appml/appml-case-models.html" >
			AppML 案例模型			</a>
						<a target="_top" title="AppML 案例模板"  href="/appml/appml-case-templates.html" >
			AppML 案例模板			</a>
						<a target="_top" title="AppML 案例 Employees"  href="/appml/appml-case-employees.html" >
			AppML 案例 Employees			</a>
						<a target="_top" title="AppML 案例 Customers"  href="/appml/appml-case-customers.html" >
			AppML 案例 Customers			</a>
						<a target="_top" title="AppML 案例 Products"  href="/appml/appml-case-products.html" >
			AppML 案例 Products			</a>
						<a target="_top" title="AppML 未来的应用程序"  href="/appml/appml-webstandards.html" >
			AppML 案例未来			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/appml/appml-case-employees.html" rel="prev"> AppML 案例 Employees</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/appml/appml-case-products.html" rel="next"> AppML 案例 Products</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<link rel="stylesheet" type="text/css" href="/try/appml/appml.css" >

<h1>
<span class="color_h1">&lt;AppML&gt; </span>Customers - 完整的应用程序</h1>
<hr>
<div id="Form01"></div>
<div id="List01"></div>
<br><div id="Orders01"></div>

<table id="Template01" class="appmltable" style="width:100%;display:none">
<tr>
<th></th>
<th>Customer</th>
<th>City</th>
<th>Country</th>
<th>Orders</th>
</tr>
<tr id="appml_row">
<td style="cursor:pointer" onclick='customerForm.run("Form01","","#CustomerID#")'>
<img src="/wp-content/uploads/2013/10/appmlPlus.png"></td>
<td>#CustomerName#</td>
<td>#City#</td>
<td>#Country#</td>
<td><a href='' onclick='openOrders("#CustomerID#");return false;'>Orders</a></td>
</tr>
</table>

<table id="Template02" class="appmltable" style="width:100%;display:none">
<tr>
<th>Customer</th>
<th>Date</th>
<th>Salesperson</th>
<th>Shipper</th>
</tr>
<tr id="appml_row">
<td>#CustomerName#</td>
<td>#OrderDate#</td>
<td>#Salesperson#</td>
<td>#ShipperName#</td>
</tr>
</table> 

<h2>源代码</h2>
<div class="example">
<h2 class="example">HTML 源代码</h2>
<div class="example_code notranslate">
&lt;html&gt;<br>&lt;body&gt;<br><br>&lt;h1&gt;Customers&lt;/h1&gt;<br><br>&lt;div 
	id="Form01"&gt;&lt;/div&gt;<br>&lt;div id="List01"&gt;&lt;/div&gt;&lt;br&gt;<br>&lt;div 
	id="Orders01"&gt;&lt;/div&gt;<br><br>&lt;table id="Template01" class="appmltable" 
	style="width:100%;display:none"&gt;<br>&lt;tr&gt;<br>&lt;th&gt;&lt;/th&gt;<br>&lt;th&gt;Customer&lt;/th&gt;<br>
	&lt;th&gt;City&lt;/th&gt;<br>&lt;th&gt;Country&lt;/th&gt;<br>&lt;th&gt;Orders&lt;/th&gt;<br>&lt;/tr&gt;<br>&lt;tr 
	id="appml_row"&gt;<br>&lt;td style="cursor:pointer" 
	onclick='customerForm.run("Form01","","#CustomerID#")'&gt;<br>&lt;img 
	src="Images/appmlPlus.png"&gt;&lt;/td&gt;<br>&lt;td&gt;#CustomerName#&lt;/td&gt;<br>
	&lt;td&gt;#City#&lt;/td&gt;<br>&lt;td&gt;#Country#&lt;/td&gt;<br>&lt;td&gt;&lt;a href='' 
	onclick='openOrders(#CustomerID#);return false;'&gt;Orders&lt;/a&gt;&lt;/td&gt;<br>&lt;/tr&gt;<br>
	&lt;/table&gt;<br><br>&lt;table id="Template02" class="appmltable" 
	style="width:100%;display:none"&gt;<br>&lt;tr&gt;<br>&lt;th&gt;Customer&lt;/th&gt;<br>
	&lt;th&gt;Date&lt;/th&gt;<br>&lt;th&gt;Salesperson&lt;/th&gt;<br>&lt;th&gt;Shipper&lt;/th&gt;<br>&lt;/tr&gt;<br>&lt;tr 
	id="appml_row"&gt;<br>&lt;td&gt;#CustomerName#&lt;/td&gt;<br>&lt;td&gt;#OrderDate#&lt;/td&gt;<br>
	&lt;td&gt;#Salesperson#&lt;/td&gt;<br>&lt;td&gt;#ShipperName#&lt;/td&gt;<br>&lt;/tr&gt;<br>&lt;/table&gt; <br><br>&lt;script src="appml.js"&gt;&lt;/script&gt;<br><br>&lt;script&gt;<br>var customers,customerForm,orders;<br>customers=new 
	AppML("appml.php","Models/Customers");<br>
	customers.run("List01","Template01");<br>customerForm=new 
	AppML("appml.php","Models/Customers");<br>customerForm.displayType="form";<br>
	function openOrders(id)<br>{<br>orders=new 
	AppML("appml.php","Models/Orders");<br>orders.commands=false;<br>
	orders.setQuery("orders.customerid",id);<br>
	orders.run("Orders01","Template02");<br>}<br>&lt;/script&gt;<br><br>&lt;/body&gt;<br>
&lt;/html&gt;</div>
</div>
<script src="/try/appml/appml.js"></script>
<script>
var customers,customerForm,orders;
customers=new AppML("http://test.runoob.com/appml/appml.php","./Models/Customers.xml");
customers.run("List01","Template01");
customerForm=new AppML("http://test.runoob.com/appml/appml.php","./Models/Customers.xml");
customerForm.displayType="form";
function openOrders(id)
{
orders=new AppML("http://test.runoob.com/appml/appml.php","./Models/Orders.xml");
orders.commands=false;
orders.setQuery("orders.customerid",id);
orders.run("Orders01","Template02");
}
</script>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/appml/appml-case-employees.html" rel="prev"> AppML 案例 Employees</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/appml/appml-case-products.html" rel="next"> AppML 案例 Products</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<form action="index.php">
<input class="placeholder" value="搜索……" name="s" autocomplete="off">
</form>
</div>
<div class="row">
<div class="col logo">
<h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
</div>
<div class="col right-list">
<button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
</div>
<div class="col search search-desktop last">
<form action="http://www.runoob.com/" target="_blank">
<input class="placeholder" id="s" name="s" value="搜索……" autocomplete="off">
</form>
</div>
</div>
</div>
<div class="container navigation">
<div class="row">
<div class="col nav">
<ul class="pc-nav">
<li><a href="http://www.runoob.com/">首页</a></li>
<li><a href="/html/html-tutorial.html">HTML</a></li>
<li><a href="/css/css-tutorial.html">CSS</a></li>
<li><a href="/js/js-tutorial.html">JavaScript</a></li>
<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
<li><a href="/sql/sql-tutorial.html">SQL</a></li>
<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
<li><a href="/php/php-tutorial.html">PHP</a></li>
<li><a href="/python/python-tutorial.html">Python</a></li>
<li><a href="/cprogramming/c-tutorial.html">C</a></li>
<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
<li><a href="/java/java-tutorial.html">Java</a></li>
<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
<li><a href="/sitemap">更多……</a></li>
</ul>
<ul class="mobile-nav">
<li><a href="http://www.runoob.com/">首页</a></li>
<li><a href="/html/html-tutorial.html">HTML</a></li>
<li><a href="/css/css-tutorial.html">CSS</a></li>
<li><a href="/js/js-tutorial.html">JavaScript</a></li>
<a href="javascript:void(0)" class="search-reveal">Search</a>
</ul>
</div>
</div>
</div>
<div class="container main">
<div class="row">
<div class="col left-column">
<div class="tab">AppML 教程</div>
<div class="sidebar-box gallery-list">
<div class="design" id="leftcolumn">
<a target="_top" title="AppML 教程" href="/appml/appml-tutorial.html">
AppML 教程 </a>
<a target="_top" title="如何使用 AppML" href="/appml/appml-howto.html">
如何使用 AppML </a>
<a target="_top" title="AppML 下载" href="/appml/appml-download.html">
AppML 下载 </a>
<a target="_top" title="AppML 架构" href="/appml/appml-architecture.html">
AppML 架构 </a>
<a target="_top" title="AppML 参考手册" href="/appml/appml-reference.html">
AppML 参考手册 </a>
<a target="_top" title="AppML 案例简介" href="/appml/appml-case-intro.html">
AppML 案例简介 </a>
<a target="_top" title="AppML 案例原型" href="/appml/appml-case-prototyping.html">
AppML 案例原型 </a>
<a target="_top" title="AppML 案例模型" href="/appml/appml-case-models.html">
AppML 案例模型 </a>
<a target="_top" title="AppML 案例模板" href="/appml/appml-case-templates.html">
AppML 案例模板 </a>
<a target="_top" title="AppML 案例 Employees" href="/appml/appml-case-employees.html">
AppML 案例 Employees </a>
<a target="_top" title="AppML 案例 Customers" href="/appml/appml-case-customers.html">
AppML 案例 Customers </a>
<a target="_top" title="AppML 案例 Products" href="/appml/appml-case-products.html">
AppML 案例 Products </a>
<a target="_top" title="AppML 未来的应用程序" href="/appml/appml-webstandards.html">
AppML 案例未来 </a>
</div>
</div>
</div> <div class="col middle-column">
<div class="article">
<div class="article-heading-ad">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px" data-ad-client="ca-pub-5751451760833794" data-ad-slot="1691338467" data-ad-format="horizontal"></ins>
<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
</div>
<div class="previous-next-links">
<div class="previous-design-link">← <a href="http://www.runoob.com/appml/appml-case-customers.html" rel="prev"> AppML 案例 Customers</a> </div>
<div class="next-design-link"><a href="http://www.runoob.com/appml/appml-webstandards.html" rel="next"> AppML 未来的应用程序</a> →</div>
</div>
<div class="article-body">
<div class="article-intro" id="content">
<link rel="stylesheet" type="text/css" href="/try/appml/appml.css">
<h1>
<span class="color_h1">&lt;AppML&gt; </span>Products - 完整的应用程序</h1>
<hr>
<div id="Form01"></div>
<div id="List01"></div>
<br><table id="Template01" class="appmltable" style="width:100%;display:none">
<tr>
<th></th>
<th>Product Name</th>
<th>Category</th>
<th>Supplier</th>
</tr>
<tr id="appml_row">
<td style="cursor:pointer" onclick="productForm.run('Form01','Template02','#ProductID#')">
<img src="/wp-content/uploads/2013/10/appmlPlus.png"></td>
<td>#ProductName#</td>
<td>#CategoryName#</td>
<td>#SupplierName#</td>
</tr>
</table>
<div id="Template02" class="appmlform" style="width:100%;display:none">
<label>ProductName:</label><input id="ProductName">
<label>Supplier:</label>
<select id="SupplierID" data-appmlapplication="Models/Dropdown_Suppliers">
</select>
<label>Category:</label>
<select id="CategoryID" data-appmlapplication="Models/Dropdown_Categories">
</select>
<label>Unit:</label><input id="Unit">
<label>Price:</label><input id="Price">
</div>
<h2>源代码</h2>
<div class="example">
<h2 class="example">HTML 源代码</h2>
<div class="example_code notranslate">
&lt;html&gt;<br>&lt;body&gt;<br><br>&lt;h1&gt;Products&lt;/h1&gt;<br><br>
&lt;div id="Form01"&gt;&lt;/div&gt;<br>&lt;div id="List01"&gt;&lt;/div&gt;&lt;br&gt;<br><br>&lt;table
id="Template01" class="appmltable" style="width:100%;display:none"&gt;<br>&lt;tr&gt;<br>
&lt;th&gt;&lt;/th&gt;<br>&lt;th&gt;Product Name&lt;/th&gt;<br>&lt;th&gt;Category&lt;/th&gt;<br>&lt;th&gt;Supplier&lt;/th&gt;<br>
&lt;/tr&gt;<br>&lt;tr id="appml_row"&gt;<br>&lt;td style="cursor:pointer"
onclick="productForm.run('Form01','Template02','#ProductID#')"&gt;<br>&lt;img
src="Images/appmlPlus.png"&gt;&lt;/td&gt;<br>&lt;td&gt;#ProductName#&lt;/td&gt;<br>
&lt;td&gt;#CategoryName#&lt;/td&gt;<br>&lt;td&gt;#SupplierName#&lt;/td&gt;<br>&lt;/tr&gt;<br>&lt;/table&gt;<br><br>&lt;div id="Template02" class="appmlform" style="width:100%;display:none"&gt;<br>
&lt;label&gt;ProductName:&lt;/label&gt;&lt;input id="ProductName"&gt;<br>
&lt;label&gt;Supplier:&lt;/label&gt;<br>&lt;select id="SupplierID"
data-appmlapplication="Models/Dropdown_Suppliers"&gt;<br>&lt;/select&gt;<br>
&lt;label&gt;Category:&lt;/label&gt;<br>&lt;select id="CategoryID"
data-appmlapplication="Models/Dropdown_Categories"&gt;<br>&lt;/select&gt;<br>
&lt;label&gt;Unit:&lt;/label&gt;&lt;input id="Unit"&gt;<br>&lt;label&gt;Price:&lt;/label&gt;&lt;input
id="Price"&gt;<br>&lt;/div&gt; <br><br>&lt;script src="appml.js"&gt;&lt;/script&gt;<br>&lt;script&gt;<br>
var products,productForm<br>products=new
AppML("appml.php","Models/Products");<br>
products.run("List01","Template01");<br>productForm=new
AppML("appml.php","Models/Products");<br>productForm.displayType="form";<br>&lt;/script&gt;<br><br>&lt;/body&gt;<br>&lt;/html&gt;</div>
</div>
<script src="/try/appml/appml.js"></script>
<script>
var products,productForm
products=new AppML("http://test.runoob.com/appml/appml.php","./Models/Products.xml");
products.run("List01","Template01");
productForm=new AppML("http://test.runoob.com/appml/appml.php","./Models/Products.xml");
productForm.displayType="form";
</script>
</div>
</div>
<div class="previous-next-links">
<div class="previous-design-link">← <a href="http://www.runoob.com/appml/appml-case-customers.html" rel="prev"> AppML 案例 Customers</a> </div>
<div class="next-design-link"><a href="http://www.runoob.com/appml/appml-webstandards.html" rel="next"> AppML 未来的应用程序</a> →</div>
</div>
<div class="sidebar-box ad-box ad-box-large">
<div class="ad-336280">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px" data-ad-client="ca-pub-5751451760833794" data-ad-slot="1691338467" data-ad-format="rectangle"></ins>
<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
</div>
</div>
</div>
</div>
<div class="fivecol last right-column">
<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
<div class="sidebar-box">
<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
<div class="qqinfo">
</div>
</div>
<div class="tab tab-light-blue">分类导航</div>
<div class="sidebar-box sidebar-cate">
<div class="sidebar-tree">
<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul> </div>
</div>
<br>
<div class="sidebar-box ad-box ad-box-large">
<div class="sidebar-box advertise-here">
<a href="javascript:void(0);">Advertisement</a>
</div>
<div class="ad-600160">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block;width:160px;height:600px" data-ad-client="ca-pub-5751451760833794" data-ad-slot="4106274865"></ins>
<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
</div>
</div>
</div></div>
</div>
<div id="footer" class="mar-t50">
<div class="w3cschoolcc-block">
<div class="w3cschoolcc cf">
<dl>
<dt>
在线实例
</dt>
<dd>
&middot;<a href="/html/html-examples.html">HTML 实例</a>
</dd>
<dd>
&middot;<a href="/css/css-examples.html">CSS 实例</a>
</dd>
<dd>
&middot;<a href="/js/js-examples.html">JavaScript 实例</a>
</dd>
<dd>
&middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
</dd>
<dd>
&middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
</dd>
<dd>
&middot;<a href="/xml/xml-examples.html">XML 实例</a>
</dd>
<dd>
&middot;<a href="/java/java-examples.html">Java 实例</a>
</dd>
</dl>
<dl>
<dt>
字符集&工具
</dt>
<dd>
&middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
</dd>
<dd>
&middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
</dd>
<dd>
&middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
</dd>
<dd>
&middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
</dd>
<dd>
&middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
</dd>
<dd>
&middot; <a href="/jsontool">JSON 格式化工具</a>
</dd>
</dl>
<dl>
<dt>
最新更新
</dt>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/event-contextmenu.html" title="jQuery contextmenu()  方法">jQuery contextm...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type() ...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim() ...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
</dd>
</dl>
<dl>
<dt>
站点信息
</dt>
<dd>
&middot;
<a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
</dd>
<dd>
&middot;
<a href="/disclaimer">免责声明</a>
</dd>
<dd>
&middot;
<a href="/aboutus">关于我们</a>
</dd>
<dd>
&middot;
<a href="/archives">文章归档</a>
</dd>
</dl>
<div class="search-share">
<div class="app-download">
<div>
<strong>关注微信</strong>
</div>
</div>
<div class="share">
<img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
</div>
</div>
</div>
</div>
<div class="w-1000 copyright">
Copyright &copy; 2013-2016 <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
<strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
</div>
</div>
<div class="fixed-btn">
<a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
<a class="qrcode" href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
<a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
<div id="bottom-qrcode" class="modal panel-modal hide fade in">
<h4>微信关注</h4>
<div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
</div>
</div>
<div style="display:none;">
<script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
<script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<form action="index.php">
<input class="placeholder" value="搜索……" name="s" autocomplete="off">
</form>
</div>
<div class="row">
<div class="col logo">
<h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
</div>
<div class="col right-list">
<button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
</div>
<div class="col search search-desktop last">
<form action="http://www.runoob.com/" target="_blank">
<input class="placeholder" id="s" name="s" value="搜索……" autocomplete="off">
</form>
</div>
</div>
</div>
<div class="container navigation">
<div class="row">
<div class="col nav">
<ul class="pc-nav">
<li><a href="http://www.runoob.com/">首页</a></li>
<li><a href="/html/html-tutorial.html">HTML</a></li>
<li><a href="/css/css-tutorial.html">CSS</a></li>
<li><a href="/js/js-tutorial.html">JavaScript</a></li>
<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
<li><a href="/sql/sql-tutorial.html">SQL</a></li>
<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
<li><a href="/php/php-tutorial.html">PHP</a></li>
<li><a href="/python/python-tutorial.html">Python</a></li>
<li><a href="/cprogramming/c-tutorial.html">C</a></li>
<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
<li><a href="/java/java-tutorial.html">Java</a></li>
<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
<li><a href="/sitemap">更多……</a></li>
</ul>
<ul class="mobile-nav">
<li><a href="http://www.runoob.com/">首页</a></li>
<li><a href="/html/html-tutorial.html">HTML</a></li>
<li><a href="/css/css-tutorial.html">CSS</a></li>
<li><a href="/js/js-tutorial.html">JavaScript</a></li>
<a href="javascript:void(0)" class="search-reveal">Search</a>
</ul>
</div>
</div>
</div>
<div class="container main">
<div class="row">
<div class="col left-column">
<div class="tab">AppML 教程</div>
<div class="sidebar-box gallery-list">
<div class="design" id="leftcolumn">
<a target="_top" title="AppML 教程" href="/appml/appml-tutorial.html">
AppML 教程 </a>
<a target="_top" title="如何使用 AppML" href="/appml/appml-howto.html">
如何使用 AppML </a>
<a target="_top" title="AppML 下载" href="/appml/appml-download.html">
AppML 下载 </a>
<a target="_top" title="AppML 架构" href="/appml/appml-architecture.html">
AppML 架构 </a>
<a target="_top" title="AppML 参考手册" href="/appml/appml-reference.html">
AppML 参考手册 </a>
<a target="_top" title="AppML 案例简介" href="/appml/appml-case-intro.html">
AppML 案例简介 </a>
<a target="_top" title="AppML 案例原型" href="/appml/appml-case-prototyping.html">
AppML 案例原型 </a>
<a target="_top" title="AppML 案例模型" href="/appml/appml-case-models.html">
AppML 案例模型 </a>
<a target="_top" title="AppML 案例模板" href="/appml/appml-case-templates.html">
AppML 案例模板 </a>
<a target="_top" title="AppML 案例 Employees" href="/appml/appml-case-employees.html">
AppML 案例 Employees </a>
<a target="_top" title="AppML 案例 Customers" href="/appml/appml-case-customers.html">
AppML 案例 Customers </a>
<a target="_top" title="AppML 案例 Products" href="/appml/appml-case-products.html">
AppML 案例 Products </a>
<a target="_top" title="AppML 未来的应用程序" href="/appml/appml-webstandards.html">
AppML 案例未来 </a>
</div>
</div>
</div> <div class="col middle-column">
<div class="article">
<div class="article-heading-ad">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px" data-ad-client="ca-pub-5751451760833794" data-ad-slot="1691338467" data-ad-format="horizontal"></ins>
<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
</div>
<div class="previous-next-links">
<div class="previous-design-link">← <a href="http://www.runoob.com/appml/appml-case-products.html" rel="prev"> AppML 案例 Products</a> </div>
<div class="next-design-link"></div>
</div>
<div class="article-body">
<div class="article-intro" id="content">
<h1>未来的应用程序</h1>
<hr>
<p class="intro">下文介绍<b>菜鸟教程版本的</b>有关<b> </b>
未来
Web 应用程序。</p>
<hr>
<h2>可执行文件将消亡，JavaScript 将存活</h2>
<p>编译的可执行文件（如 C 或 Java 语言的编译）不能在不同的硬件上运行。</p>
<p>可执行文件（EXE 文件、ActiveX 和 COM 对象、DLL 文件）是防止运行在互联网上的应用程序发展的组件。</p>
<p>
未来的应用程序将无法使用，或依靠，安装在客户端计算机上的组件。</p>
<p><strong>我们的建议：</strong></p>
<p>仅使用 HTML、CSS 和 JavaScript 来编写您未来的应用程序。</p>
<p>确保您未来的应用程序可以运行在任何的 Web 浏览器中。</p>
<hr>
<h2>Web 应用程序将成为互联网服务</h2>
<p>过去的应用程序都是大型的、为特定目的创建的应用程序。它们中的大多数很快将会消亡，因为它们不能随着需求的变更提供服务。</p>
<p>应用程序应该是灵活的、通用的、能在不被破坏的情况下很好地适应需求的变更。</p>
<p>应用程序应该能够扩展，从支持每天数以百万计的请求。</p>
<p>应用程序应该能够在不被破坏的情况下，在多个服务器之间进行传播和移动。</p>
<p>应用程序应该能够与其它的应用程序共同使用。</p>
<p>应用程序不应该包含大量的代码。应用程序应该被分解成更小的服务，以便易于创建和易于维护。</p>
<p>应用程序是可返回数据到提交的互联网请求的一系列互联网服务。</p>
<p>
应用程序应该在不保持到服务器的永久连接的情况下通过标准的互联网协议请求服务。</p>
<p>
<strong>我们的建议：</strong></p>
<p>
使用基于 SOA（Service Oriented Architecture 面向服务架构）的互联网来编写您未来的应用程序。</p>
<p>让您的应用程序服务更通用，更灵活，且能服务于不同类型的请求。</p>
<hr>
<h2>未来的应用程序将很容易创建和编辑</h2>
<p>客户端和服务器端将在一个易于理解的方式进行数据交换。</p>
<p>如果能够避免，应用程序将不被编码。</p>
<p>应用程序将通过编辑模型而不是编辑代码来创建和修改。</p>
<p>应用程序描述将被人类可读。</p>
<p>应用程序描述将具有自我描述性。</p>
<p>应用程序将由用户编写，而不是由程序员编写。</p>
<p><strong>我们的建议：</strong></p>
<p>使用人类可读的文本文件来描述服务，并通过执行这些描述来提供服务。</p>
<p>使用文本文件（如 XML 文件）来描述应用程序。</p>
<p>使用文本文件（如 XML 文件）来进行数据交换。</p>
<p>使用 HTML、CSS 和 JavaScript 来执行应用程序。</p>
<hr>
<h2>三个小的 Web 开发人员...</h2>
<p>很久以前，有三个小的 Web 开发人员，开发一个新的 Web 站点。</p>
<p>1. 第一个 Web 开发人员使用 &lt;AppML&gt;。</p>
<p>2. 第二个 Web 开发人员使用他最喜欢的服务器端编程语言。</p>
<p>3. 第三是使用专业的企业 Web 开发框架。</p>
<p>第一个 Web 开发人员在两天内完成演示。经过与用户的合作，一周内完成了初步原型。经过两周的测试，一个智能的、快速的和易于使用的网站准备发布。</p>
<p>6 个月后，第二个 Web 开发人员准备好了他的网站。但是 WWW 已经改变了需求，所以对他的网站并不满意。这个 Web 开发人员无法对他的项目做出重大的改变，因为它包含了太多的代码。于是，他开始第 2 版的开发。</p>
<p>第三个 Web 开发人员从来没有成功地完成他的工作。那个专业的 Web 开发框架，使用起来很困难，很难理解，几乎是不可能的测试。</p>
<p><a href="appml-case-intro.html">看一看第一个开发人员是如何做到的</a>。</p>
<br>
</div>
</div>
<div class="previous-next-links">
<div class="previous-design-link">← <a href="http://www.runoob.com/appml/appml-case-products.html" rel="prev"> AppML 案例 Products</a> </div>
<div class="next-design-link"></div>
</div>
<div class="sidebar-box ad-box ad-box-large">
<div class="ad-336280">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px" data-ad-client="ca-pub-5751451760833794" data-ad-slot="1691338467" data-ad-format="rectangle"></ins>
<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
</div>
</div>
</div>
</div>
<div class="fivecol last right-column">
<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
<div class="sidebar-box">
<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
<div class="qqinfo">
</div>
</div>
<div class="tab tab-light-blue">分类导航</div>
<div class="sidebar-box sidebar-cate">
<div class="sidebar-tree">
<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul> </div>
</div>
<br>
<div class="sidebar-box ad-box ad-box-large">
<div class="sidebar-box advertise-here">
<a href="javascript:void(0);">Advertisement</a>
</div>
<div class="ad-600160">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block;width:160px;height:600px" data-ad-client="ca-pub-5751451760833794" data-ad-slot="4106274865"></ins>
<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
</div>
</div>
</div></div>
</div>
<div id="footer" class="mar-t50">
<div class="w3cschoolcc-block">
<div class="w3cschoolcc cf">
<dl>
<dt>
在线实例
</dt>
<dd>
&middot;<a href="/html/html-examples.html">HTML 实例</a>
</dd>
<dd>
&middot;<a href="/css/css-examples.html">CSS 实例</a>
</dd>
<dd>
&middot;<a href="/js/js-examples.html">JavaScript 实例</a>
</dd>
<dd>
&middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
</dd>
<dd>
&middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
</dd>
<dd>
&middot;<a href="/xml/xml-examples.html">XML 实例</a>
</dd>
<dd>
&middot;<a href="/java/java-examples.html">Java 实例</a>
</dd>
</dl>
<dl>
<dt>
字符集&工具
</dt>
<dd>
&middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
</dd>
<dd>
&middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
</dd>
<dd>
&middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
</dd>
<dd>
&middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
</dd>
<dd>
&middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
</dd>
<dd>
&middot; <a href="/jsontool">JSON 格式化工具</a>
</dd>
</dl>
<dl>
<dt>
最新更新
</dt>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/event-contextmenu.html" title="jQuery contextmenu()  方法">jQuery contextm...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type() ...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim() ...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
</dd>
</dl>
<dl>
<dt>
站点信息
</dt>
<dd>
&middot;
<a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
</dd>
<dd>
&middot;
<a href="/disclaimer">免责声明</a>
</dd>
<dd>
&middot;
<a href="/aboutus">关于我们</a>
</dd>
<dd>
&middot;
<a href="/archives">文章归档</a>
</dd>
</dl>
<div class="search-share">
<div class="app-download">
<div>
<strong>关注微信</strong>
</div>
</div>
<div class="share">
<img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
</div>
</div>
</div>
</div>
<div class="w-1000 copyright">
Copyright &copy; 2013-2016 <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
<strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
</div>
</div>
<div class="fixed-btn">
<a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
<a class="qrcode" href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
<a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
<div id="bottom-qrcode" class="modal panel-modal hide fade in">
<h4>微信关注</h4>
<div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
</div>
</div>
<div style="display:none;">
<script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
<script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
</html>